চিপ

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 composable হল এই পৃষ্ঠায় তালিকাভুক্ত কম্পোজেবলগুলির মধ্যে সবচেয়ে মৌলিক, এর API সংজ্ঞা এবং এর সাধারণ ব্যবহারের ক্ষেত্রে উভয় ক্ষেত্রেই। সাজেশন চিপগুলি গতিশীলভাবে জেনারেট করা ইঙ্গিতগুলি উপস্থাপন করে। উদাহরণস্বরূপ, একটি AI চ্যাট অ্যাপে, আপনি সাম্প্রতিক বার্তায় সম্ভাব্য প্রতিক্রিয়া উপস্থাপন করতে পরামর্শ চিপ ব্যবহার করতে পারেন।

SuggestionChip এই বাস্তবায়ন বিবেচনা করুন:

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

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

উন্নত চিপ

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

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

• উপাদান UI ডক্স