চিপ

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 ডকুমেন্টেশন