ב-Jetpack Compose Glimmer, הרכיב TitleChip הוא רכיב לא אינטראקטיבי שמספק הקשר קצר או תיוג לתוכן משויך, כמו Card או VerticalList.
אפשר להשתמש בצ'יפים של כותרות כדי להציג מידע תמציתי כמו שם קצר של הפריט, שם קטגוריה או אינדיקטור סטטוס. בדרך כלל, כדאי למקם את צ'יפים של כותרות מעל התוכן שהם מתארים כדי ליצור קשר מבני ברור.
דוגמה בסיסית: יצירת צ'יפ עם שם קצר של הפריט
הקוד הבא יוצר צ'יפ בסיסי עם שם:
@Composable fun TitleChipSample() { TitleChip { Text("Messages") } }
Example: Create a title chip with a card
To use a title chip with another component, place the title chip
TitleChipDefaults.associatedContentSpacing above the other component in
the composable. The following code creates a title chip with a card:
@Composable fun TitleChipWithCardSample() { Column(horizontalAlignment = Alignment.CenterHorizontally) { TitleChip { Text("Title Chip") } Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing)) Card( title = { Text("Title") }, subtitle = { Text("Subtitle") }, leadingIcon = { Icon(FavoriteIcon, "Localized description") }, ) { Text("Card Content") } } }
מידע חשוב על הקוד
- צ'יפ הכותרת ממורכז אופקית, שזה היישור הרגיל לצ'יפ כותרת שמוצב מעל כרטיס.
- ל-
Spacerיש גובה קבוע כדי לספק את המרווח האנכי הנכון בין שני הרכיבים. ההגדרה מתבצעת באמצעות התגTitleChipDefaults.associatedContentSpacing. - אפשר להשתמש בתווית
leadingIconכדי להוסיף הקשר חזותי נוסף לפני תוכן הטקסט. - הטקסט של צ'יפ הכותרת מקבל אוטומטית את הסגנון
caption. - צ'יפ הכותרת לא אינטראקטיבי. אם אתם צריכים תווית שאפשר ללחוץ עליה, השתמשו ב-
Buttonאו ברכיב אינטראקטיבי אחר.