চিপ

Chip কম্পোনেন্ট হল একটি কমপ্যাক্ট, ইন্টার‍্যাক্টিভ UI এলিমেন্ট। এটি পরিচিতি বা ট্যাগের মতো জটিল এন্টিটি দেখায়, সাধারণত আইকন ও লেবেল সহ। এটি চেক করা, বাতিল করা বা ক্লিক করা যেতে পারে।

চার ধরনের চিপ এবং আপনি সেগুলি কোথায় ব্যবহার করতে পারেন তা নিচে উল্লেখ করা হল:

• সহায়তা: কোনও টাস্ক চলাকালীন ব্যবহারকারীকে গাইড করে। ব্যবহারকারীর ইনপুটের উত্তরে প্রায়ই সাময়িক UI এলিমেন্ট হিসেবে দেখা যায়।
• ফিল্টার: ব্যবহারকারীদের বিকল্পের সেট থেকে কন্টেন্ট রিফাইন করার অনুমতি দেয়। এগুলি বেছে নেওয়া বা অনির্বাচন করা যেতে পারে এবং বেছে নেওয়া হলে চেকমার্ক আইকন অন্তর্ভুক্ত থাকতে পারে।
• ইনপুট: ব্যবহারকারীর দেওয়া তথ্য দেখায়, যেমন মেনুতে বেছে নেওয়া বিকল্প। এতে আইকন ও টেক্সট থাকতে পারে এবং সরানোর জন্য X প্রদান করতে পারে।
• সাজেশন: ব্যবহারকারীর সাম্প্রতিক অ্যাক্টিভিটি বা ইনপুটের ভিত্তিতে তাকে সাজেশন প্রদান করে। সাধারণত ব্যবহারকারীকে অ্যাকশন নেওয়ার জন্য প্রম্পট করতে ইনপুট ফিল্ডের নিচে দেখানো হয়।

API সারফেস

চার ধরনের চিপের সাথে মানানসই চারটি কম্পোজেবল আছে। নিম্নলিখিত বিভাগগুলি এই কম্পোজেবল এবং তাদের পার্থক্যগুলি বিস্তারিতভাবে বর্ণনা করে। তবে, তারা নিম্নলিখিত প্যারামিটার শেয়ার করে:

• label: চিপে যে স্ট্রিং দেখা যায়।
• icon: চিপের শুরুতে দেখানো আইকন। কিছু নির্দিষ্ট কম্পোজ করার উপযুক্ত আইটেমে আলাদা leadingIcon এবং trailingIcon প্যারামিটার থাকে।
• onClick: ব্যবহারকারী চিপে প্রেস করলে যে ল্যাম্বডা কল করা হয়।

অ্যাসিস্ট চিপ

AssistChip কম্পোজেবল, অ্যাসিস্ট চিপ তৈরি করার একটি সহজ উপায় প্রদান করে যা ব্যবহারকারীকে একটি নির্দিষ্ট দিকে নির্দেশ করে। একটি স্বতন্ত্র ফিচার হল এর leadingIcon প্যারামিটার যা আপনাকে চিপের বাঁদিকে একটি আইকন দেখাতে দেয়। আপনি কীভাবে এটি প্রয়োগ করতে পারেন তা নিম্নলিখিত উদাহরণ থেকে দেখুন:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

এই ধরনের প্রয়োগ নিচে দেখানো হল।

চিপ ফিল্টার করুন

FilterChip কম্পোজেবল ব্যবহার করলে, চিপটি বেছে নেওয়া হয়েছে কিনা তা আপনাকে ট্র্যাক করতে হবে। ব্যবহারকারী চিপ বেছে নিলে, আপনি কীভাবে একটি লিডিং চেক করা আইকন দেখাতে পারেন তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

বেছে না নেওয়া হলে এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

এবং বেছে নেওয়া হলে নিম্নলিখিতভাবে দেখানো হয়:

ইনপুট চিপ

ব্যবহারকারীর ইন্টার‍্যাকশনের ফলে তৈরি হওয়া চিপ তৈরি করতে আপনি InputChip কম্পোজেবল ব্যবহার করতে পারেন। যেমন, ইমেল ক্লায়েন্টে, ব্যবহারকারী ইমেল লেখার সময়, "প্রাপক:" ফিল্ডে ব্যবহারকারীর যোগ করা পরিচিতি ইনপুট চিপের মাধ্যমে দেখানো হতে পারে।

নিম্নলিখিত ইমপ্লিমেন্টেশন এমন একটি ইনপুট চিপ দেখায় যা আগে থেকেই বেছে নেওয়া অবস্থায় রয়েছে। ব্যবহারকারী চিপে প্রেস করলে সেটি বাতিল হয়ে যায়।

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

এই ধরনের প্রয়োগ নিচে দেখানো হল।

সাজেশন চিপ

SuggestionChip কম্পোজেবল হল এই পৃষ্ঠায় তালিকাভুক্ত কম্পোজেবলগুলির মধ্যে সবচেয়ে মৌলিক, এর API সংজ্ঞা এবং সাধারণ ব্যবহারের ক্ষেত্রে, উভয় ক্ষেত্রেই। সাজেশন চিপ ডায়নামিকভাবে তৈরি করা ইঙ্গিত দেখায়। যেমন, AI চ্যাট অ্যাপে, আপনি সাম্প্রতিকতম মেসেজের সম্ভাব্য উত্তর দেখানোর জন্য সাজেশন চিপ ব্যবহার করতে পারেন।

SuggestionChip-এর এই প্রয়োগ বিবেচনা করুন:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

এই ধরনের প্রয়োগ নিচে দেখানো হল:

এলিভেটেড চিপ

এই ডকুমেন্টের সব উদাহরণে বেস কম্পোজেবল ব্যবহার করা হয় যা ফ্ল্যাট অ্যাপিয়ারেন্স নেয়। আপনি যদি এমন চিপ চান যা দেখতে উন্নত, তাহলে নিম্নলিখিত তিনটি কম্পোজেবলের মধ্যে একটি ব্যবহার করুন:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

অতিরিক্ত রিসোর্স

• Material UI ডকুমেন্ট