চিপ

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

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

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

এই বাস্তবায়নটি নিম্নরূপ:

একটি সাধারণ সাজেশন চিপ।
চিত্র ৬. পরামর্শ চিপ।

উন্নত চিপ

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

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