ফোকাস অবস্থা নির্দেশ করুন

ফোকাসড অবস্থা ব্যবহারকারীদের একটি স্পষ্ট ভিজ্যুয়াল সংকেত প্রদান করে, যা তাদের বুঝতে সাহায্য করে যে কোন UI এলিমেন্টটি বর্তমানে ইনপুট ফোকাস ধরে রেখেছে। সমস্ত ইন্টারেক্টিভ ম্যাটেরিয়াল ৩ কম্পোনেন্ট ডিফল্টরূপে বিল্ট-ইন ফোকাস ইন্ডিকেশন প্রদান করে।

দ্রষ্টব্য: এই নির্দেশিকায় ভিজ্যুয়াল ফোকাস ইন্ডিকেশন কীভাবে আঁকতে হয় তা আলোচনা করা হয়েছে। প্রোগ্রাম্যাটিকভাবে ফোকাস ট্রানজিশন শুনতে, ফোকাস ফ্ল্যাগ ( isFocused , hasFocus , isCaptured ) কোয়েরি করতে, বা স্টেট-চালিত UI পরিবর্তন ট্রিগার করতে, React to focus দেখুন।

উপাদান থিমের ফোকাস ইঙ্গিত

ম্যাটেরিয়াল কম্পোনেন্টগুলো অবস্থার দৃশ্যমান পরিবর্তন আঁকতে ripple ফাংশন এবং LocalIndication ব্যবহার করে। একটি কাস্টম কম্পোনেন্টে স্ট্যান্ডার্ড ম্যাটেরিয়াল ফোকাস ফিডব্যাক সংযুক্ত করতে:

1. remember { MutableInteractionSource() } ব্যবহার করে একটি MutableInteractionSource তৈরি করুন।
2. ripple() এর পাশাপাশি ইন্টার‍্যাকশন সোর্সটিকে indication মডিফায়ারে পাস করুন।

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

কাস্টম ফোকাস নির্দেশাবলী প্রয়োগ করুন

নিজস্ব ভিজ্যুয়াল সংকেতের জন্য (যেমন স্কেলিং, বর্ডার, বা উজ্জ্বল প্রভাব):

1. একটি IndicationNodeFactory তৈরি করুন।
2. এলিমেন্টটির InteractionSource থেকে নির্গত ফোকাস ইন্টারঅ্যাকশনগুলো পর্যবেক্ষণ করুন।
3. indication মডিফায়ার ব্যবহার করে কাস্টম ইন্ডিকেশনটি প্রয়োগ করুন।

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt

{% হুবহু %} {% endverbatim %}