চিপ

Chip কম্পোনেন্টটি একটি কম্প্যাক্ট, ইন্টারেক্টিভ UI এলিমেন্ট। এটি একটি পরিচিতি বা ট্যাগের মতো জটিল সত্তার প্রতিনিধিত্ব করে, প্রায়শই একটি আইকন এবং লেবেল সহ। এটি চেকযোগ্য, খারিজযোগ্য, অথবা ক্লিকযোগ্য হতে পারে।

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

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

এপিআই সারফেস

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

• 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 কম্পোজেবল ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি ইমেল ক্লায়েন্টে, যখন ব্যবহারকারী একটি ইমেল লিখছেন, তখন একটি ইনপুট চিপ এমন একটি পরিচিতিকে প্রতিনিধিত্ব করতে পারে যা ব্যবহারকারী "To:" ক্ষেত্রে যোগ করেছেন।

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

@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

অতিরিক্ত সম্পদ

• ম্যাটেরিয়াল UI ডক্স