চিপ

Chip উপাদান একটি কমপ্যাক্ট, ইন্টারেক্টিভ UI উপাদান। এটি একটি পরিচিতি বা ট্যাগের মতো জটিল সত্তাকে প্রতিনিধিত্ব করে, প্রায়ই একটি আইকন এবং লেবেল সহ। এটি পরীক্ষাযোগ্য, বাতিলযোগ্য বা ক্লিকযোগ্য হতে পারে।

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

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

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

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

একটি সাধারণ সহায়তা চিপ।
চিত্র 2. অ্যাসিস্ট চিপ।

ফিল্টার চিপ

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

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

একটি অনির্বাচিত ফিল্টার চিপ, কোন চেক এবং একটি পরিকল্পনা ব্যাকগ্রাউন্ড ছাড়া।
চিত্র 3. অনির্বাচিত ফিল্টার চিপ।

এবং নির্বাচিত হলে নিম্নরূপ প্রদর্শিত হয়:

একটি চেক এবং একটি রঙিন ব্যাকগ্রাউন্ড সহ নির্বাচিত ফিল্টার চিপ।
চিত্র 4. নির্বাচিত ফিল্টার চিপ।

ইনপুট চিপ

আপনি ব্যবহারকারীর ইন্টারঅ্যাকশনের ফলে চিপ তৈরি করতে 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

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

একটি অবতার এবং একটি ট্রেলিং আইকন সহ একটি ইনপুট চিপ৷
চিত্র 5. ইনপুট চিপ।

সাজেশন চিপ

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

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

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

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

একটি সাধারণ সহায়তা চিপ।
চিত্র 6. অ্যাসিস্ট চিপ।

উন্নত চিপ

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

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