تراشه

عنصر Chip یک عنصر میانای کاربر تعاملی و فشرده است. این عنصر نشان‌دهنده نهادهای پیچیده مانند مخاطب یا برچسب است که اغلب با نماد و برچسب همراه است. می‌تواند قابل بررسی، قابل بستن، یا کلیک‌کردنی باشد.

چهار نوع تراشه و مکان‌هایی که ممکن است از آن‌ها استفاده کنید به شرح زیر است:

• کمک: کاربر را درطول انجام تکلیف راهنمایی می‌کند. اغلب به‌عنوان عنصر موقت رابط کاربری در پاسخ به ورودی کاربر ظاهر می‌شود.
• فیلتر: به کاربران امکان می‌دهد محتوا را از مجموعه‌ای از گزینه‌ها پالایش کنند. می‌توانند انتخاب یا لغو انتخاب شوند و ممکن است هنگام انتخاب، نماد تیک داشته باشند.
• ورودی: نشان‌دهنده اطلاعات ارائه‌شده توسط کاربر، مانند انتخاب‌ها در منو. می‌تواند حاوی نماد و نوشتار باشد و 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 برای ایجاد تراشه‌هایی که از تعامل کاربر حاصل می‌شوند استفاده کنید. برای مثال، در کارخواه ایمیل، وقتی کاربر درحال نوشتن ایمیل است، تراشه ورودی ممکن است نشان‌دهنده مخاطبی باشد که کاربر به فیلد «به:» اضافه کرده است.

پیاده‌سازی زیر تراشه ورودی را نشان می‌دهد که ازقبل در حالت انتخاب‌شده است. کاربر با فشار دادن تراشه آن را می‌بندد.

@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

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

تراشه برجسته

همه مثال‌های این سند از عناصر ترکیبی پایه‌ای استفاده می‌کنند که ظاهر تخت دارند. اگر تراشه‌ای می‌خواهید که ظاهر برجسته‌ای داشته باشد، از یکی از سه عنصر ترکیبی زیر استفاده کنید:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

منابع بیشتر

• اسناد Material UI