Jetpack Compose Glimmer-এ বোতাম

প্রযোজ্য XR ডিভাইস

এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, Button হল একটি ইন্ট্যার‍্যাক্টিভ কম্পোনেন্ট যা ডিসপ্লে গ্লাসের ইনপুটের জন্য অপ্টিমাইজ করা হয়েছে এবং ব্যবহারকারীর অ্যাকশন গাইড করার জন্য এর স্টেটের মাধ্যমে স্পষ্ট ভিজ্যুয়াল ফিডব্যাক প্রদান করে।

Jetpack Compose Glimmer সারফেস সিস্টেমে বোতাম তৈরি করা হয়, যা বর্ডার ও ডেপথের মতো ফিজিক্যাল প্রপার্টি অটোমেটিক ম্যানেজ করে।

স্ট্যান্ডার্ড বোতামে একটি টেক্সট লেবেল ও ঐচ্ছিক আইকন থাকে। আপনি এটি প্রাথমিক বা গৌণ অ্যাকশনের জন্য ব্যবহার করতে পারবেন। এছাড়াও, আইকন বোতাম এবং টগল বোতাম-এর মতো বিশেষ বোতাম রয়েছে, যেগুলি Jetpack Compose Glimmer-এ আলাদা কম্পোনেন্ট হিসেবে সংজ্ঞায়িত করা হয়।

ডিফল্ট

বড়

অঙ্গব্যবচ্ছেদ - বিদ্যা

বোতামে একটি কন্টেনার ও লেবেল থাকে, সাথে ঐচ্ছিক লিডিং ও ট্রেলিং আইকন থাকে।

মাপগুলি

Jetpack Compose Glimmer বোতামে দুটি সাইজ ভেরিয়েন্ট কাজ করে। এগুলি ন্যূনতম উচ্চতা ও ইন্টার্নাল প্যাডিংকে প্রভাবিত করে।

রাজ্য

Jetpack Compose Glimmer-এর বোতামগুলি তাদের স্টেট কমিউনিকেট করার জন্য তাদের চেহারা পরিবর্তন করে।

• চালু করা: ইন্টার‍্যাক্টিভ বোতামের ডিফল্ট অবস্থা।
• ফোকাস করা: ফোকাস করা হলে, বোতামটি একটি GlimmerTheme.depthEffectLevels.level1 এবং ফোকাস করা বর্ডার হাইলাইট প্রয়োগ করে।
• প্রেস করা হয়েছে: অ্যাক্টিভেট করা হলে, সারফেসের উপর অর্ধ-স্বচ্ছ সাদা ওভারলে প্রয়োগ করা হয়।
• বন্ধ করা আছে: বোতামটি ইনপুটের উত্তর দেয় না এবং এর ভিজ্যুয়াল অ্যাপিয়ারেন্স অ্যাডজাস্ট করা হয়।

বোতামের ডিফল্ট

স্ট্যান্ডার্ড বোতামের ক্ষেত্রে নিম্নলিখিত ডিফল্ট প্রযোজ্য:

• ডিফল্ট হিসেবে, বোতাম GlimmerTheme.typography.bodySmall ব্যবহার করে। নিশ্চিত করুন যে বোতামের মধ্যে থাকা টেক্সট সংক্ষিপ্ত এবং অ্যাকশনটি স্পষ্টভাবে বর্ণনা করে।
• বোতামের ডিফল্ট আকার হল GlimmerTheme.shapes.large। এই ধারাবাহিক রাউন্ডিং ডিসপ্লে গ্লাস ইন্টারফেস জুড়ে বোতাম শনাক্ত করতে ব্যবহারকারীদের সাহায্য করে।

উদাহরণ: টেক্সট ও আইকন সহ বোতাম

সাধারণ বোতামে শুধুমাত্র টেক্সট লেবেল থাকে, তবে আপনি টেক্সটের শুরুতে (leadingIcon ব্যবহার করে) বা শেষে (trailingIcon ব্যবহার করে) আইকন যোগ করে অতিরিক্ত প্রসঙ্গ প্রদান করতে পারেন।

নিচের কোডটি লিডিং ও ট্রেলিং আইকন সহ একটি বোতাম তৈরি করে:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

বোতাম গ্রুপ

ButtonGroup কম্পোজ করার উপযুক্ত আইটেম আপনাকে স্ক্রল করা যায় এমন সারিতে বোতাম গ্রুপ করতে দেয় যা ফোকাস কন্ট্রোলার হিসেবে কাজ করে। ব্যবহারকারী স্ক্রল করার সাথে সাথে, বর্তমান স্ক্রল পজিশনের সাথে সম্পর্কিত বোতামটি হাইলাইট করার জন্য ফোকাস অটোমেটিক সরে যায়।

যেমন: বোতামের গ্রুপ

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

বোতামের গ্রুপে ফোকাস কন্ট্রোল

আপনি কোনও গ্রুপের যেকোনও বোতামে ফোকাস সরাতে পারেন যাতে ম্যানুয়ালি নির্বাচন কন্ট্রোল করা যায়।

ButtonGroup স্টেট ব্যবহার করে স্ক্রল করার আচরণ কাস্টমাইজ ও কন্ট্রোল করুন:

1. rememberButtonGroupState-এর মাধ্যমে স্টেট ঘোষণা করুন।
2. এটি ButtonGroup কম্পোজ করার উপযুক্ত আইটেমে পাস করুন।
3. নির্দিষ্ট আইটেমে স্ক্রল করতে এবং অটোমেটিক সেটিতে ফোকাস সরাতে animateScrollToItem (বা ইনস্ট্যান্ট স্ক্রলিংয়ের জন্য scrollToItem) কল করুন।

নিচে উল্লেখ করা কোডটি ক্লিক করার পরে একটি বোতাম থেকে অন্য বোতামে ফোকাস সরিয়ে দেয়:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt