‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

تراشه

مؤلفه 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 composable ابتدایی‌ترین composable فهرست‌شده در این صفحه است، هم ازنظر تعریف API و هم ازنظر موارد استفاده رایج آن. تراشه‌های پیشنهاد، نکته‌های تولیدشده به‌صورت پویا را ارائه می‌دهند. برای مثال، در برنامه گپ هوش مصنوعی، می‌توانید از تراشه‌های پیشنهادی برای ارائه پاسخ‌های احتمالی به جدیدترین پیام استفاده کنید.

این پیاده‌سازی SuggestionChip را درنظر بگیرید:

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

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

تراشه پیشنهاد ساده. — **شکل ۶.‏** تراشه پیشنهاد.

تراشه برجسته

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

منابع بیشتر

اسناد Material UI