Usage
📝 Usage #
All the components are ready to use out-of-the-box.
Yassir Theme #
YassirTheme {
Box(
modifier = Modifier
.fillMaxSize()
.padding(YassirTheme.spacing.m)
) {
Text(
text = "Hello from Yassir Theme!",
style = YassirTheme.typography.heading4,
color = YassirTheme.colors.labelNeutralDefault,
)
}
}
Accordion #
Accordion(
modifier = Modifier // optional
headingText = "Heading",
bodyText = "Body Text ".repeat(50), // optional
headerIconResId = ContentIcons.Document, // optional
customContent = { Text("Change me!") } // optional
)
- For more details visit Accordion documentation
Avatar #
- Initials Avatar
InitialsAvatar(
modifier = Modifier, // optional
name = "Foo Bar",
size = AvatarSize.Large,
isFocused = true, // optional
badge = {} // optional
)
- Image Avatar
ImageAvatar(
modifier = Modifier, // optional
imageUrl = null, // optional
resourceId = R.drawable.ic_avatar, // optional
size = AvatarSize.Medium,
isFocused = false, // optional
badge = {} // optional
)
- Icon Avatar
IconAvatar(
size = AvatarSize.Small,
modifier = Modifier, // optional
iconRes = DrawableR.ic_user, // optional
isFocused = false, // optional
badge = {} // optional
)
- For more details visit Avatars documentation
Avatar Group #
val listOfAvatars = listOf(
AvatarGroupItem(
avatarType = AvatarType.Initials, //Icon, Image, Initials variants
name = "John Doe", // optional (for Initials variant)
imageUrl = null, // optional (for Image variant)
iconRes = R.drawable.ic_avatar, // optional (for Icon variant)
imageRes = R.drawable.ic_avatar, // optional (for Image variant)
)
)
AvatarGroup (
modifier = Modifier,
avatars= listOfAvatars,
size = AvatarSize.Large
)
- For more details visit Avatar Group documentation
Backdrop #
- Carousel Dot State
Backdrop(
modifier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.EmptyState(
illustrationResIds = listOf(
IllustrationInfo(
R.drawable.flag_algeria_rect,
message = "Top up 1",
description = "check 1"
), IllustrationInfo(
R.drawable.flag_uae_rect,
message = "Top up 2",
description = "check 2"
), IllustrationInfo(
R.drawable.flag_south_africa_rect,
message = "Top up 3",
description = "check 3",
)
),
carouselIndicatorType = CarouselIndicatorType.Black, // optional
carouselIndicatorStyle = CarouselIndicatorStyle.Dot, // optional
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = {},
)
- Carousel Line State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.EmptyState(
illustrationResIds = listOf(
IllustrationInfo(
R.drawable.flag_algeria_rect,
message = "Top up 1",
description = "check 1"
), IllustrationInfo(
R.drawable.flag_uae_rect,
message = "Top up 2",
description = "check 2"
), IllustrationInfo(
R.drawable.flag_south_africa_rect,
message = "Top up 3",
description = "check 3",
)
),
carouselIndicatorType = CarouselIndicatorType.White, // optional
carouselIndicatorStyle = CarouselIndicatorStyle.Line, // optional
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- Single Illustration State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.EmptyState(
illustrationResIds = IllustrationInfo(
R.drawable.flag_algeria_rect,
message = "Top up 1",
description = "check 1"
)
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- CustomState State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.CustomState(
customContent = {
// create custom component
}
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- ListItem State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.ListItemState(
items = List(50) { index ->
Element(
title = "Item Title $index",
description = "description",
formattedAmount = "1000$",
onClick = {}
)
},
showScrollbar = true // optional
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- For more details visit Backdrop documentation
Badge #
Badge(
style = BadgeStyleType.Primary,
badgeText = "1", // optional
colors: YassirColorScheme = YassirTheme.colors, // optional
typography: YassirTypography = YassirTheme.typography, // optional
)
- For more details visit Badge documentation
Banner #
- Boxed Banner
Banner(
bannerType = BannerType.Boxed(
label = "Label", // optional
bodyText = "This is the subtitle text of banner.", // optional
style = BannerState.Default,
captionText = "This is the caption text of banner", // optional
captionIconRes = R.drawable.ic_alert_circle, // optional
leadingIconRes = R.drawable.ic_alert_circle, // optional
trailingIconRes = R.drawable.ic_small_x, // optional
isElevated = false, // optional
primaryBannerAction =
BannerAction(
text = "Primary Action",
isEnabled = false, // optional
onClick = { /* action */ }
), // optional
secondaryBannerAction =
BannerAction(
text = "Secondary action",
isEnabled = false, // optional
onClick = { /* action */ },
)
), // optional
trailingIconOnClick = { /* action */ }
)
- FulWidth Banner
Banner(
bannerType = BannerType.FullWidth(
text = "This is the text of banner",
style = BannerState.Positive,
iconRes = R.drawable.ic_alert_circle, // optional
isElevated = true // optional
)
)
- For more details visit Banner documentation
Bottom Navigation Bar #
val bottomNavigationBarList = listOf(
BottomNavigationBarItem(
text = "Tab",
iconRes = R.drawable.ic_alert_circle,
onClick = { /* action */ }
),
BottomNavigationBarItem(
text = "Tabs",
iconRes = R.drawable.ic_lock,
onClick = { /* action */ }
),
BottomNavigationBarItem(
text = "Tab",
iconRes = R.drawable.ic_coins_hand,
onClick = { /* action */ },
badgeText = "2"
onClick = { /* action */ },
)
)
BottomNavigationBar(
list = bottomNavigationBarList,
initialSelectedItemIndex = 1, // optional
colors = YassirColorScheme.colors // optional
)
- For more details visit Bottom Navigation Bar documentation
Buttons #
- Floating Action Button
PrimaryFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Top, // optional
contentDescription = "content_description", // optional
)
SecondaryFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Bottom, // optional
contentDescription = "content_description", // optional
)
TextualFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Top, // optional
contentDescription = "content_description", // optional
)
BrandedFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Top, // optional
contentDescription = "content_description", // optional
)
NegativeFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Bottom, // optional
contentDescription = "content_description", // optional
)
For more details visit Floating Action Buttons documentation
- Icon Buttons
PrimaryIconButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
clickable = true, // optional
isShadowOnTop = false, // optional
elevationStyle = null, // optional
size = YassirButtonSize.Small, // optional
contentDescription = "content_description", // optional
iconSize = 5.dp // optional
)
SecondaryIconButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
clickable = true, // optional
isShadowOnTop = false, // optional
elevationStyle = null, // optional
size = YassirButtonSize.Medium, // optional
contentDescription = "content_description", // optional
iconSize = 5.dp // optional
)
TextualIconButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
clickable = true, // optional
isShadowOnTop = false, // optional
elevationStyle = null, // optional
size = YassirButtonSize.Large, // optional
contentDescription = "content_description", // optional
iconSize = 5.dp // optional
)
BrandedIconButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
clickable = true, // optional
isShadowOnTop = false, // optional
elevationStyle = null, // optional
size = YassirButtonSize.ExtraLarge, // optional
contentDescription = "content_description", // optional
iconSize = 5.dp // optional
)
NegativeIconButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
clickable = true, // optional
isShadowOnTop = false, // optional
elevationStyle = null, // optional
size = YassirButtonSize.Small, // optional
contentDescription = "content_description", // optional
iconSize = 5.dp // optional
)
For more details visit Icon Buttons documentation
- Increment Button
var showProgressIndicator by rememberSaveable { mutableStateOf(false) }
DefaultIncrementButton(
modifier = modifier, // optional
enabled = areButtonsEnabled, // optional
loading = showProgressIndicator, // optional
trashState = true, // optional
minValue = 1, // optional
maxValue = 5, // optional
defaultValue = 1, // optional
elevationStyle = ElevationStyle.Light1, // optional
shadowPosition = ShadowPosition.Top, // optional
onTrashClicked = { Toast.makeText(context, "Trash Clicked", Toast.LENGTH_SHORT).show() } // optional
)
For more details visit Increment Buttons documentation
- Text Button
PrimaryButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Small, // optional
)
BrandedButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.ExtraLarge, // optional
)
SecondaryButton(
modifier = modifier, // optional
onClick = {},
text = "text",
isElevated = true, // optional
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Large, // optional
)
TextualButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Medium, // optional
)
NegativeButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Small, // optional
)
For more details visit Text Buttons documentation
Cards #
Activity Card #
- Activity Card with Body = Text and Actions = single button
SefarActivityCard(
modifier = Modifier, //optional
listItem = ActivityCardListItem(
title = "Title",
iconRes = DrawableR.ic_user, //optional
transactionStatus = TransactionStatus.Pending, //optional
transactionDateTime = Date(), //optional
balance = "1000 DZD" //optional
),
body = ActivityCardBody.Text("Some Text for Preview"),
actions = ActivityCardActions.Buttons(
firstAction = ActivityAction(
label = "Action",
onClick = {},
isEnabled = true
),
) //optional
)
- Activity Card with Body = Address List and Actions = two buttons
SefarActivityCard(
modifier = Modifier, //optional
listItem = ActivityCardListItem(
title = "Title",
iconRes = DrawableR.ic_user, //optional
transactionStatus = TransactionStatus.Pending, //optional
transactionDateTime = Date(), //optional
balance = "1000 DZD" //optional
),
body = ActivityCardBody.AddressList(
locationsList = listOf(
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
)
),
actions = ActivityCardActions.Buttons(
firstAction = ActivityAction(
label = "Action",
onClick = {},
isEnabled = true
),
secondaryAction = ActivityAction(
label = "Action 2",
onClick = {},
isEnabled = true
),
) //optional
)
- Activity Card with Body = Address List and Actions = tag and label
SefarActivityCard(
modifier = Modifier, //optional
listItem = ActivityCardListItem(
title = "Title",
iconRes = DrawableR.ic_user, //optional
transactionStatus = TransactionStatus.Pending, //optional
transactionDateTime = Date(), //optional
balance = "1000 DZD" //optional
),
body = ActivityCardBody.AddressList(
locationsList = listOf(
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
)
),
actions = ActivityCardActions.Tag(
labelText = "Label", //optional
tagText = "Tag Text", //optional
iconRes = DrawableR.ic_coins_hand //optional
) //optional
)
For more details visit Activity Card documentation
Horizontal Card #
- Image Aligned
HorizontalCard(
modifier = Modifier, // optional
element = HorizontalCardElement(
image = Image(
resId = R.drawable.flag_algeria_rect,
size = ImageSize.Large
), // optional
titled = Titled(
variant = TitledSectionVariant.Level4,
title = CARD_TITLE,
subtitle = CARD_SUBTITLE,
description = TEXT_ALIGNED_LAYOUT,
caption = CAPTION_TEXT
),
subElement = SubElement.PriceElement(regularPriceText = REGULAR_PRICE_TEXT), // optional
primary = ActionButton(text = BUY_NOW, onClick = {}), // optional
secondary = SecondaryAction.Button(text = ADD_TO_CART, onClick = {}) // optional
),
layoutCardType = LayoutCardType.ImageAligned // optional
)
- Text Aligned
HorizontalCard(
modifier = Modifier, // optional
element = HorizontalCardElement(
image = Image(
resId = R.drawable.flag_algeria_rect,
size = ImageSize.Large
), // optional
titled = Titled(
variant = TitledSectionVariant.Level4,
title = CARD_TITLE,
subtitle = CARD_SUBTITLE,
description = TEXT_ALIGNED_LAYOUT,
caption = CAPTION_TEXT
),
subElement = SubElement.PriceElement(regularPriceText = REGULAR_PRICE_TEXT), // optional
primary = ActionButton(text = BUY_NOW, onClick = {}), // optional
secondary = SecondaryAction.Button(text = ADD_TO_CART, onClick = {}) // optional
),
layoutCardType = LayoutCardType.TextAligned // optional
)
- For more details visit Horizontal Card documentation
Shop Card #
@Composable
fun ShopCardExample() {
ShopCard(
shopCardDetails = shopCardDetails,
isEnabled = true
)
}
fun getShopCardDetails() {
val hasYassirSideElement = false
val shopCardDetails = ShopCardDetails(
text = "Title",
sideElement = if (hasYassirSideElement) {
SideElement.YassirLogo(isDirectlyAdjacent = hasSnugSideElement)
} else {
SideElement.IconWithLabel(
isDirectlyAdjacent = hasSnugSideElement,
iconResId = DrawableR.ic_plus_circle,
iconLabel = "1"
)
},
imageUrl = null, // optional
imageResId = DrawableR.flag_morocco_rect, // optional
leadingElementType = LeadingElementType.ImageAvatar(resourceId = R.drawable.ic_avatar), // optional
desc = "Body", // optional
primaryTag = TagDetails(
text = "New",
startIconResId = R.drawable.ic_map_mark
), // optional
secondaryTag = TagDetails(
text = "Discount",
startIconResId = R.drawable.ic_map_mark
), // optional
disabledTag = TagDetails(
text = "Coming Soon",
startIconResId = R.drawable.ic_map_mark
), // optional
iconButton = IconButtonDetails(
iconResId = MapsIcons.Bus,
contentDescription = null,
) // optional
)
}
For more details visit Shop Card documentation
Vertical Card #
- Large Card
VerticalCard(
element = VerticalCardElement(
title = CARD_TITLE,
image = Image(
resId = R.drawable.ic_avatar,
isEnable = isImageEnable == ImageInput.Enable
),
priceElement = priceElement, // optional
tagElement = tagElement, // optional
action = SecondaryAction.IncrementButton(type = IncrementButtonType.Animated()) // optional
),
size = VerticalCardSize.Large
)
- Small Card
VerticalCard(
element = VerticalCardElement(
title = CARD_TITLE,
image = Image(
resId = R.drawable.ic_avatar,
isEnable = isImageEnable == ImageInput.Enable
),
priceElement = priceElement,// optional
tagElement = tagElement,// optional
action = SecondaryAction.IncrementButton(type = IncrementButtonType.Animated())// optional
),
size = VerticalCardSize.Small
)
- For more details visit Vertical Card documentation
Chips #
- Plain Single Chip with no Leading Element
SingleChip(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
size = YassirChipSize.Large,
chipItem = ChipItem.Plain(
text = text,
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
),
onClick = { isSelected = isSelected.not() }, // optional
onClearIconClick = if (hasClearIcon) {
null
} else {
{ isCleared = true }
}, // optional
shape = RoundedCornerShape(size = SizeConstants.size6) // optional
)
- Single Chip with Icon as Leading Element
SingleChip(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
size = YassirChipSize.Small,
chipItem = ChipItem.Icon(
text = text,
iconResourceId = DrawableR.ic_coins_hand,
counterValue = null, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
),
onClick = { isSelected = isSelected.not() }, // optional
onClearIconClick = if (hasClearIcon) {
null
} else {
{ isCleared = true }
}, // optional
shape = RoundedCornerShape(size = SizeConstants.size6) // optional
)
- Single Chip with Image Avatar as Leading Element
SingleChip(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
size = YassirChipSize.Small,
chipItem = ChipItem.ImageAvatar(
text = text,
imageUrl = "", // optional
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
),
onClick = { isSelected = isSelected.not() }, // optional
onClearIconClick = if (hasClearIcon) {
null
} else {
{ isCleared = true }
}, // optional
shape = RoundedCornerShape(size = SizeConstants.size6) // optional
)
- Chip Filter
val listOfChips = (1..7).forEach {
add(
ChipItem.ImageAvatar(
text = text,
imageUrl = "", // optional
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
)
)
}
ChipFilter(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
chipElements = listOfChips,
size = chipSelectedSize,
allowMultipleSelection = allowMultipleSelection, // optional
allowHorizontalScrolling = allowHorizontalScrolling, // optional,
shape = RoundedCornerShape(size = SizeConstants.size6), // optional
onElementClick = { chipItem -> } // optional
)
- Chip Group
val listOfChips = (1..7).forEach {
add(
ChipItem.Plain(
text = text,
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
)
)
}
ChipGroup(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
chipElements = listOfChips,
size = YassirChipSize.Small,
onElementClick = { chipItem -> } // optional
)
- For more details visit Chips documentation
Divider #
- Simple Default
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.Default,
orientation = Orientation.Horizontal,
)
- Simple Left Aligned
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.LeftAligned,
orientation = Orientation.Horizontal
)
- Simple Right Aligned
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.RightAligned,
orientation = Orientation.Horizontal
)
- Simple Horizontally Aligned
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.HorizontalAligned,
orientation = Orientation.Horizontal
)
- Doubled
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Doubled,
orientation = Orientation.Horizontal
)
- Thick
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Thick,
orientation = Orientation.Horizontal
)
- Dotted
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Dotted,
orientation = Orientation.Horizontal
)
- For more details visit Divider documentation
Flags #
- Circular Flag
CircularFlag(
countryCode = "TN",
modifier = modifier, // optional
size = FlagSize.Small, // optional
contentDescription = "" // optional
)
- Rectangular Flag
RectangularFlag(
countryCode = "SA",
modifier = Modifier, // optional
size = FlagSize.Medium, // optional
contentDescription = "" // optional
)
- For more details visit Flags documentation
Input Fields #
Address Field #
- Departure Address Field
var value by remember { mutableStateOf("") }
AddressField(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1), // optional
addressFieldType = AddressFieldType.Departure(
leadingIcon = leadingAddressFieldLeadingIcon.Flag, // optional
label = "label", // optional
hint = "hint", // optional
),
enabled = true,
value = value,
errorMessage = "Field can't be empty", // optional
onValueChange = { value = it },
)
- Stop Address Field
var value by remember { mutableStateOf("") }
AddressField(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1), // optional
addressFieldType = AddressFieldType.Stop(
leadingIcon = AddressFieldLeadingIcon.MarkerPin, // optional
label = "label", // optional
hint = "hint", // optional
hasTrailingDragIcon = true, // optional
onDragStart = {}, // optional
onDrag = {}, // optional
onDragEnd = {}, // optional
onDragReposition = {}, // optional
onAddActionClick = {} // optional
),
enabled = true,
value = "",
errorMessage = "Field can't be empty", // optional
onValueChange = { value = it },
)
- Destination Address Field
var value by remember { mutableStateOf("") }
AddressField(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1), // optional
addressFieldType = AddressFieldType.Destination(
leadingIcon = AddressFieldLeadingIcon.DoubleLocationPins, // optional
label = "label", // optional
hint = "hint", // optional
hasTrailingDragIcon = true, // optional
onDragStart = {}, // optional
onDrag = {}, // optional
onDragEnd = {}, // optional
onDragReposition = {}, // optional
onAddActionClick = {} // optional
),
enabled = true,
value = "",
errorMessage = "Field can't be empty", // optional
onValueChange = { value = it },
)
- For more details visit Address Field documentation
Currency Input Field #
CurrencyInput(
modifier = Modifier.padding(horizontal = YassirTheme.spacing.spacing1_5), // optional
value = "text",
onValueChange = { },
regionCode = "DZ",
currencyCode = "DZD",
formattedBalance = "3000 DZD",
enabled = true, // optional
hasError = false, // optional
hint = AnnotatedString("This is an example hint"), // optional
onImeAction = { /* action */ }, // optional
placeholder = "0", // optional
clickableHint = "HyperLink", // optional
onHintClick = {}, // optional
imeAction = ImeAction.Default, // optional
)
For more details visit Currency Input documentation
Dropdown Field Input #
DropdownInput(
modifier = Modifier.fillMaxWidth(), // optional, default is Modifier
items = listOf(
DropdownInputItem(text = "Option 1", iconResourceId = R.drawable.ic_option1_icon),
DropdownInputItem(text = "Option 2", avatarResourceId = R.drawable.avatar_option2),
DropdownInputItem(text = "Option 3") // No icon or avatar
),
selectedItems = mutableListOf(
// Empty list for standard behavior, prefilled list for already pre-selected items being displayed
),
multiSelect = true,
onItemSelect = { selectedItem ->
// Handle item select logic here
},
onItemDeselect = { deselectedItem ->
// Handle item deselect logic here
},
onApply = {
// Handle apply button logic here
},
onClear = {
// Handle clear button logic here
},
labelText = "Select Items", // optional, default is null
dropDownText = "Choose from options", // optional, default is null
hintText = "Select one or more options from the dropdown", // optional, default is null
leadingIcon = R.drawable.ic_dropdown_icon, // optional, default is null
isError = false, // optional, default is false
errorText = "An error occurred", // optional, default is null
disabled = false, // optional, default is false
applyButtonText = "Apply Selection", // optional, default is "Apply"
clearButtonText = "Clear All" // optional, default is "Clear filter"
)
- For more details visit Dropdown Field Input documentation
Generic Input Field #
GenericInput(
label = "Email Label", // optional
value = "text",
onValueChange = { text = it },
modifier = Modifier, // optional
enabled = enabled, // optional
hasError = hasError, // optional
showIconOnError = true, // optional
leading = GenericInputDefaults.Empty, // optional
trailing = GenericInputDefaults.Empty, // optional
placeholder = "Placeholder text", // optional
hint = "Hint text", // optional
showScrollBars = true, // optional
shiftTrailingComponent = false, // optional
onHintClick = {}, // optional
forceLtr = true, // optional
cursorAtEnd = false, // optional
textAlign = TextAlign.Start, // optional
maxLines = 1, // optional
fixedHeight = null, // optional
minHeight = 30.dp, // optional
maxHeight = 60.dp, // optional
innerFieldStaticLeadingText = "Test", // optional
keyboardOptions = KeyboardOptions(
keyboardType = keyboardType,
imeAction = imeAction
), // optional
keyboardActions = KeyboardActions(
onAny = { /* action */ }
), // optional
labelTextStyle = YassirTheme.typography.bodyLargeBold, // optional
visualTransformation = VisualTransformation.None
)
For more details visit Generic Input documentation
(PIN/OTP) Code Input Fields #
//PIN Code
CodeInput(
modifier = Modifier, // optional
codeType = CodeType.PIN_CODE,
label = "PIN Code", // optional
isError = false, // optional
isEnabled = true, // optional
clearCode = false, // optional
autoFocus = true, // optional
codeLength = CodeInputDefaults.LENGTH, // optional
spaceBetweenCodeCells = YassirTheme.spacing.spacing2, // optional
hint = AnnotatedString(hintText), // optional
onHintClick = {}, // optional
resetErrorState = {}, // optional
onCodeFilled = { code ->
/* handle entered PIN code */
},
colors = YassirTheme.colors // optional
)
//OTP Code
CodeInput(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(top = YassirTheme.spacing.spacing4), // optional
codeType = CodeType.OTP_CODE,
isError = false, // optional
isEnabled = true, // optional
clearCode = false, // optional
autoFocus = true, // optional
codeLength = 6, // optional
spaceBetweenCodeCells = YassirTheme.spacing.spacing1_5, // optional
hint = AnnotatedString(hintText), // optional
onHintClick = {}, // optional
resetErrorState = { isError = false }, // optional
onCodeFilled = { code ->
/* handle entered OTP code */
},
colors = YassirTheme.colors, // optional
label = "OTP Code" // optional
)
- For more details visit PIN Code Input documentation or OTP Code Input documentation
Phone Input Field #
- with a supported initially selected Country
PhoneInput(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
hint = "Phone Number can't be empty!", // optional
hasError = true, // optional
hasLabel = true, // optional
enabled = true, // optional
phoneNumber = "", // optional
isCountrySelectionEnabled = true, // optional
countriesList = SupportedCountries.entries, // optional
onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
initialSelectedCountry = SupportedCountry.ALgeria, // optional
onHintClick = { /* action */ } // optional,
onImeAction = { /* action */ } // optional,
)
- with an unsupported initially selected country
val listOfCountries = buildList {
add(SupportedCountry.Algeria)
add(SupportedCountry.Canada)
add(SupportedCountry.Egypt)
add(getCountryFromRegionCode("JP"))
add(getCountryFromRegionCode("MA"))
add(getCountryFromInternationalPrefix("+34"))
add(getCountryFromInternationalPrefix("+971"))
}
PhoneInput(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
hint = "Phone Number can't be empty!", // optional
hasError = true, // optional
hasLabel = true, // optional
enabled = true, // optional
isCountrySelectionEnabled = true, // optional
phoneNumber = "", // optional
countriesList = listOfCountries, // optional
onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
initialSelectedCountry = getCountryFromRegionCode("JP"), // or getCountryFromInternationalPrefix("+81") - optional
onHintClick = { /* action */ } // optional,
onImeAction = { /* action */ } // optional,
)
For more details visit Phone Input documentation
Search Input Field #
SearchInput(
label = "Search", // optional
value = "text",
onValueChange = { newValue -> },
enabled = false, // optional
modifier = modifier, // optional
placeholder = "Search", // optional
hint = "This is a hint text to help user.", // optional
)
- For more details visit Search Input documentation
Text Area Field #
TextAreaInput(
text = "text",
onValueChange = { },
enabled = true,
hasError = false,
showScrollBars = false, // optional
placeholder = stringResource(R.string.placeholder_text), // optional
hint = if (hasHint) stringResource(R.string.hint_text) // optional
)
For more details visit Text Area Input documentation
Lists & List Items #
Address List #
val locationsList = repeat((0 until 5).count()) {
add(
Location(
name = "Location Name",
address = "Address"
)
)
}
AddressList(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
locationsList = locationsList,
notesHint = "Enter your notes to the driver here", // optional
onNotesFieldChange = { newNotes -> } // optional
)
- For more details visit Address List documentation
Checkout List Item #
CheckoutListItem(
countNumber = 2,
label = "Label",
description = "Description" // optional,
regularPriceText = "7000" // optional,
discountPriceText = "8000" // optional,
regularPriceCurrency = "DZD" // optional,
discountPriceCurrency = "DZD" // optional,
chipElements = listOf(
ChipItem(text = "Item 1", iconResourceId = DrawableR.ic_coins_hand),
ChipItem(text = "Sample Item 2", isSelected = true),
ChipItem(text = "Item 3", DrawableR.ic_coins_hand),
ChipItem(text = "Sample Item 4"),
) // optional,
)
For more details visit Checkout List Item documentation
List Item #
- List item
ListItem(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
title = "Sample Title",
description = "description",
leading = LeadingElementType.Icon(
iconRes = DrawableR.ic_coins_hand,
tint = YassirTheme.colors.labelNeutralDefault,
), // optional
trailing = TrailingElementType.CheckBox(
selectionState = trailingCheckBoxState,
onClick = {},
), // optional
description = "description", // optional
upperDescription = "upperDescription", // optional
locale = currentLocale(), // optional
onClickLabel = "", // optional
isSelected = true, // optional
isEnabled = true, // optional
onClick = {
Toast.makeText(context, "List Item was clicked", Toast.LENGTH_SHORT).show()
} // optional
)
- Item with a transaction data
ListItem(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
title = "Item Title",
description = "description", // optional
formattedAmount = "1000$",
transactionStatus = TransactionStatus.None, // optional
transactionDateTime = Date(), // optional
transactionType = TransactionType.Pending, // optional
leading = LeadingElementType.Icon(
iconRes = DrawableR.ic_coins_hand,
tint = YassirTheme.colors.labelNeutralDefault,
), // optional
trailing = TrailingElementType.CheckBox(
selectionState = trailingCheckBoxState,
onClick = {},
), // optional
locale = currentLocale(), // optional
currencyHidden = true, // optional
size = ListItemSize.Medium, // optional
upperDescription = "upperDescription", // optional
onClickLabel = "", // optional
isSelected = true, // optional
isEnabled = true, // optional
onClick = {
Toast.makeText(context, "List Item was clicked", Toast.LENGTH_SHORT).show()
} // optional
)
- For more details visit List Item documentation
Price List #
- Primary Price List with Total Element
PriceList(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
listItems = listOf(
PriceListElement(
label = "Label",
price = "10",
currency = "DZD",
)
),
totalElement = TotalPriceListElement(
label = "Total",
price = "4000",
currency = "DZD"
), // optional
type = PriceListType.Primary,
onClick = { value -> /* action */ },
)
- Icon Price List
PriceList(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
modifier = Modifier,
listItems = listOf(
PriceListElement(
label = "Label",
price = "10",
currency = "DZD",
iconRes = R.drawable.image
)
),
totalElement = null, // optional
type = PriceListType.Icon,
onClick = { value -> /* action */ },
)
- For more details visit Price List documentation
Selectors List #
- Selectors List with RadioButton
SelectorsList(
selectorsListLeadingElementType = SelectorsListRadioButton(
modifier = Modifier, // optional
selectedItemIndex = 0, // optional
items = listOf(
SelectorsListItemElement(
label = "Label",
priceText = "10",
currencyText = "DZD",
iconRes = R.drawable.image,
isEnabled = true // optional
isPreselected = true // optional
)
),
isGroupEnabled = isEnabled,
onItemSelection = { value -> /* action */ },
),
)
- Selectors List with Checkbox
SelectorsList(
selectorsListLeadingElementType = SelectorsListCheckBox(
modifier = Modifier, // optional
items = listOf(
SelectorsListItemElement(
label = "Label",
priceText = "10",
currencyText = "DZD",
iconRes = R.drawable.image,
isEnabled = true, // optional
isPreselected = true // optional
)
),
isGroupEnabled = isEnabled,
onStateChange = { checkBoxGroupState -> /* action */}, // optional
),
)
- For more details visit Selectors List documentation
Map Pin #
- Label type
YassirMapPin(
mapPinType = MapPinType.Label(
caption = "caption text",
body = "body",
subtitle = "subtitle",
showIcon = true
),
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- Avatar type
YassirMapPin(
mapPinType = MapPinType.Avatar(
imageUrl = "", // optional
resourceId = R.drawable.ic_avatar // optional
),
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- Dot type
YassirMapPin(
mapPinType = MapPinType.Dot,
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- Icon type
YassirMapPin(
mapPinType = MapPinType.Icon.Loading,
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- For more details visit Map Pin documentation
Modal #
- Empty State Modal
Modal(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
modalType = ModalType.EmptyState(
illustrationResIds = listOf(
IllustrationInfo(
resId = DrawableR.system_verified,
message = "Title",
description = "This Is description"
),
),
),
onDismiss = { /* action */ },
colors = YassirTheme.colors, // optional
primaryAction = Action(
text = "Primary Action",
onClick = { /* action */ }
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = { /* action */ }
), // optional
tertiaryAction = Action(
text = "Terniary Action",
onClick = { /* action */ }
) // optional
)
- Slot Modal
Modal(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
modalType = ModalType.Slot( /* @Composable */),
onDismiss = { /* action */ },
colors = YassirTheme.colors, // optional
primaryAction = Action(
text = "Primary Action",
onClick = { /* action */ }
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = { /* action */ }
), // optional
tertiaryAction = Action(
text = "Terniary Action",
onClick = { /* action */ }
) // optional
)
- For more details visit Modal documentation
Modifiers #
1.HorizontalScrollbar
@Composable
internal fun HorizontalScrollbarPreview() {
val state = rememberScrollState()
Row(
modifier = Modifier
.drawHorizontalScrollbar(state)
) {
repeat(50) {
Text(
text = (it + 1).toString(),
modifier = Modifier
.padding(YassirTheme.spacing.spacing1, vertical = YassirTheme.spacing.spacing2)
)
}
}
}
2.LazyListScrollbar
@Composable
internal fun LazyListScrollbarPreview() {
val state = rememberLazyListState()
LazyColumn(
modifier = Modifier.drawVerticalScrollbar(state),
state = state
) {
items(50) {
Text(
text = "Item ${it + 1}",
modifier = Modifier
.fillMaxWidth()
.padding(YassirTheme.spacing.spacing2)
)
}
}
}
3.elevation
Column(
modifier = Modifier
.elevation(ElevationStyle.Light2,
shape = RoundedCornerShape(YassirTheme.spacing.spacing1),
shadowPosition = ShadowPosition.Bottom)
.background(
colors.fromToken(style.backgroundColorKey),
shape = RoundedCornerShape(YassirTheme.spacing.spacing1)
)
.padding(
horizontal = YassirTheme.spacing.spacing1_5,
vertical = YassirTheme.spacing.spacing1
)
) {}
- For more details visit Modifiers documentation
Price #
- Vertical Large Price
Price(
regularPriceText = "6000 DZD",
discountPriceText = "7000 DZD", // optional
priceLayoutDirection = PriceLayoutDirection.Vertical, // optional
priceSize = PriceSize.Large // optional
)
- Horizontal Small Price
Price(
regularPriceText = "6000 DZD",
discountPriceText = "7000 DZD", // optional
priceLayoutDirection = PriceLayoutDirection.Horizontal, // optional
priceSize = PriceSize.Small // optional
)
- Horizontal Large Price with no discount price
Price(
regularPriceText = "6000 DZD",
priceLayoutDirection = PriceLayoutDirection.Horizontal, // optional
priceSize = PriceSize.Large // optional
)
- For more details visit Price documentation
Profile Photo #
- Image Profile
ImageProfile(
modifier = Modifier, // optional
imageUrl = "", // optional
resourceId = R.drawable.ic_avatar, // optional
size = ProfileSize.Small,
withBorder = false, // optional
badge = { } // optional
)
- Icon Profile
IconProfile(
modifier = Modifier, // optional
size = ProfileSize.Medium,
withBorder = false, // optional
badge = { } // optional
)
- Initials Profile
InitialsProfile(
name = "Foo Bar",
modifier = Modifier, // optional
size = ProfileSize.Large,
withBorder = false, // optional
badge = { } // optional
)
Badge is a lambda that returns a composable that will be displayed on the bottom right corner of the profile photo.
Verified Badge
VerifiedBadge()
Edit Badge Has onEditBadgeClick parameter that is a lambda that will be called when the edit badge is clicked.
EditBadge(onEditBadgeClick = null)
- For more details visit Profile Photo documentation
Progress Bar #
- Large ProgressBar
ProgressBar(
progress = 25f,
label = "2/5",//optional
style = ProgressBarStyle.Default,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- Small ProgressBar
ProgressBar(
progress = 25f,
label = "25%",//optional
style = ProgressBarStyle.Default,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Small,//optional
)
- For more details visit ProgressBar documentation
Scrollbar #
- LazyListState Fast Scrolling component
val numbers = (1..100).toList()
val scrollableState: LazyListState = rememberLazyListState()
val scrollbarState: ScrollbarState =
scrollableState.scrollbarState(itemsAvailable = numbers.size)
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = scrollableState,
) {
items(items = numbers) { number ->
//any item
}
}
scrollableState.DraggableScrollbar(
modifier = Modifier
.windowInsetsPadding(WindowInsets.systemBars)
.padding(horizontal = 2.dp)
.align(Alignment.CenterEnd),
state = scrollbarState,
orientation = Orientation.Vertical,
onThumbMoved = scrollableState.rememberDraggableScroller(itemsAvailable = numbers.size)
)
}
- LazyListState Regular Scrolling component
val numbers = (1..100).toList()
val scrollableState: LazyListState = rememberLazyListState()
val scrollbarState: ScrollbarState =
scrollableState.scrollbarState(itemsAvailable = numbers.size)
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = scrollableState,
) {
items(items = numbers) { number ->
//any item
}
}
scrollableState.DecorativeScrollbar(
modifier = Modifier
.windowInsetsPadding(WindowInsets.systemBars)
.padding(horizontal = 2.dp)
.align(Alignment.CenterEnd),
state = scrollbarState,
orientation = Orientation.Vertical
)
}
- LazyListState Modifier Scrolling
val state = rememberLazyListState()
LazyColumn(
modifier = Modifier.drawVerticalScrollbar(state),
state = state
) {
items(50) {
Text(
text = "Item ${it + 1}",
modifier = Modifier
.fillMaxWidth()
.padding(YassirTheme.spacing.spacing2)
)
}
}
- ScrollState Regular Scrolling component
val state: ScrollState = rememberScrollState()
val scrollbarState: ScrollbarState = state.scrollbarState()
Box(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.verticalScroll(state)
.fillMaxSize()
) {
repeat(100) { index ->
Text(text = "Item $index", style = YassirTheme.typography.heading1)
Spacer(modifier = Modifier.height(YassirTheme.spacing.spacing2))
}
}
state.DecorativeScrollbar(
modifier = Modifier
.windowInsetsPadding(WindowInsets.systemBars)
.padding(horizontal = 2.dp)
.align(Alignment.CenterEnd),
state = scrollbarState,
orientation = Orientation.Vertical
)
}
- ScrollState Modifier Scrolling
val state = rememberScrollState()
Column(
modifier = Modifier
.drawVerticalScrollbar(state)
) {
repeat(50) {
Text(
text = (it + 1).toString(),
modifier = Modifier
.padding(YassirTheme.spacing.spacing1, vertical = YassirTheme.spacing.spacing2)
)
}
}
- For more details visit Scrollbar documentation
Selectors #
- Checkbox and ChecboxGroup
Checkbox(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1_5), // optional
onSelectedChange = {},
title = "title", // optional
description = "description", // optional
isSelected = false, // optional
isEnabled = false // optional
)
CheckboxGroup(
modifier = Modifier, // optional
onStateChange = {checkBoxGroupState -> },
topLevelCheckbox = IndeterminateCheckboxItem(
title = "Toppings",
description = "All the toppings"
),
checkboxes = listOf(
CheckboxItem(title = "Pepperoni", description = "spicy salami seasoned with paprika"),
CheckboxItem(title = "Extra cheese", description = "extra cheese on your pizza!"),
CheckboxItem(title = "Olives", description = "delicious black olives")
),
isGroupEnabled = true // optional
)
- Radio Group
RadioGroup(
modifier = Modifier, // optional
onItemSelection = { intValue -> },
items = leadingRadioGroupList,
selectedItemIndex = 0, // optional
isGroupEnabled = true // optional
)
- For more details visit Selectors documentation
Skeleton (Shimmer Layout) #
- Circular
var isLoading by remember { mutableStateOf(false) }
val customSize = Size(width = 50F, height = 50F)
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
Text(
modifier = Modifier.shimmerEffect(
isLoading = isLoading,
skeletonShape = SkeletonShape.Circular(
size = customSize // optional
), // optional
isRtl = isRtl
),
text = "genericText"
)
- Rectangular
var isLoading by remember { mutableStateOf(false) }
val customSize = Size(width = 50F, height = 50F)
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
Text(
modifier = Modifier.shimmerEffect(
isLoading = isLoading,
skeletonShape = SkeletonShape.Rectangular(
rounderCornerSize = 4.dp, // optional
size = customSize // optional
), // optional
isRtl = isRtl
),
text = "genericText"
)
- List Item
var isLoading by remember { mutableStateOf(false) }
val customSize = Size(width = 350F, height = 100F)
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
Text(
modifier = Modifier.shimmerEffect(
isLoading = isLoading,
skeletonShape = SkeletonShape.ListItem(
hasImagePlaceholder = false, // optional
size = customSize // optional
), // optional
isRtl = isRtl
),
text = "genericText"
)
- For more details visit Skeleton documentation
Slider #
- Simple Slider without label
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = isEnabled, // optional
)
- Simple Slider with label - has a value sign
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
symbol = "\$" // optional
), // optional
)
- Simple Slider with label - has no value sign
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
), // optional
)
- Dashed Slider with ticks
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
symbol = "\$" // optional
), // optional
isDashed = true, // optional
)
- Dashed Slider with ticks and indicator labels
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
symbol = "\$" // optional
), // optional
isDashed = true, // optional
showDashedLabels = hasDashLabels, // optional
)
- For more details visit Slider documentation
Snackbar #
Snackbar(
message = "This is a snackbar message",
actionLabel = "Retry", // optional, displays an action button if provided
onActionClick = { /* Handle retry action */ }, // optional, called when the action button is clicked
iconResId = R.drawable.ic_alert_circle, // optional, displays an icon if a drawable resource ID is provided
size = SnackbarSize.Medium, // optional, default is SnackbarSize.Medium, can be set to SnackbarSize.Large
displayDuration = 5000L, // optional, default is 5000 milliseconds (5 seconds)
onDismiss = { /* Handle snackbar dismiss */ } // optional, called when the snackbar is dismissed
)
- For more details visit Snackbar documentation
Stepper #
- Vertical Stepper
@Composable
fun StepperExample() {
val currentStepIsError = false
val stepsAreNumbered = false
val includeDescription = true
Stepper(
modifier = Modifier, // optional
steps = getStepsList(
currentStepIsError,
stepsAreNumbered,
includeDescription
),
isHorizontal = false
)
}
private fun getStepsList(
currentStepIsError: Boolean,
stepsAreNumbered: Boolean,
includeDescription: Boolean,
noOfSteps: Int = defaultNoOfSteps,
) = buildList {
(1..noOfSteps).forEach {
val status = when (it) {
noOfSteps -> StepStatus.Remaining
noOfSteps - 1 -> if (currentStepIsError) StepStatus.Error else StepStatus.Current
else -> StepStatus.Completed
}
add(
Step(
text = "Step $it",
description = if (includeDescription) "Desc" else null, // optional
status = status,
number = it, // optional
iconResId = if (!stepsAreNumbered) R.drawable.ic_map_mark else null, // optional
iconContentDesc = "Step $it" // optional
)
)
}
}
- Horizontal Stepper
@Composable
fun StepperExample() {
val currentStepIsError = true
val stepsAreNumbered = true
val includeDescription = false
Stepper(
modifier = Modifier, // optional
steps = getStepsList(
currentStepIsError,
stepsAreNumbered,
includeDescription
),
isHorizontal = true
)
}
private fun getStepsList(
currentStepIsError: Boolean,
stepsAreNumbered: Boolean,
includeDescription: Boolean,
noOfSteps: Int = defaultNoOfSteps,
) = buildList {
(1..noOfSteps).forEach {
val status = when (it) {
noOfSteps -> StepStatus.Remaining
noOfSteps - 1 -> if (currentStepIsError) StepStatus.Error else StepStatus.Current
else -> StepStatus.Completed
}
add(
Step(
text = "Step $it",
description = if (includeDescription) "Desc" else null, // optional
status = status,
number = it, // optional
iconResId = if (!stepsAreNumbered) R.drawable.ic_map_mark else null, // optional
iconContentDesc = "Step $it" // optional
)
)
}
}
For more details visit Stepper documentation
Switches (Toggle) #
- Large Switch
Switch(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing1),
enabled = true,
checked = true,
type = ToggleType.LargeSwitch(title = "on", isIconVisible = true),
onToggle = { checked = checked.not() },
)
- Small Switch
Switch(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing1),
enabled = true,
checked = true,
type = ToggleType.SmallSwitch,
onToggle = {},
)
- For more details visit Switches documentation
Tabs #
Tabs(
modifier = Modifier, // optional
selectedTabIndex = 0,
tabsList = listOf(
TabElement(
isEnabled = true,
text = "Tab Text",
isBadgePresent = true,
badgeText = "1",
onClick = { /* action */ }
),
TabElement(
isEnabled = true,
text = "Tab Text",
isBadgePresent = false,
onClick = { /* action */ }
)
),
type = TabType.Default(isScrollable = true),
colors = YassirTheme.colors, // optional
badgeStyleType = BadgeStyleType.Primary // optional
)
- For more details visit Tabs documentation
Tag #
- Neutral Tag
NeutralTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.Small // optional
)
- Positive Tag
PositiveTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.Medium // optional
)
- Negative Tag
NegativelTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.Large // optional
)
- Warning Tag
WarningTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.ExtraLarge // optional
)
- Informative Tag
InformativeTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.Medium // optional
)
- Primary Tag
PrimaryTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.Large // optional
)
- Secondary Tag
SecondaryTag (
modifier = Modifier, // optional
text = text, // optional
isAlternativeStyle = false, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
isElevated = true, // optional
size = YassirTagSize.Small // optional
)
- For more details visit Tags documentation
Time Picker #
TimePicker(
timeFormat = TimeFormat.HOUR_24, // optional, default is TimeFormat.HOUR_24
minutesIncrement = TimeMinutesIncrement.ONE, // optional, default is TimeMinutesIncrement.ONE
startTime = Calendar.getInstance(), // optional, default is the current time
minTime = Calendar.getInstance().apply { // optional, default is start of the day (00:00)
set(Calendar.HOUR_OF_DAY, 0)
set(Calendar.MINUTE, 0)
set(Calendar.SECOND, 0)
set(Calendar.MILLISECOND, 0)
},
maxTime = Calendar.getInstance().apply { // optional, default is end of the day (23:59:59.999)
set(Calendar.HOUR_OF_DAY, 23)
set(Calendar.MINUTE, 59)
set(Calendar.SECOND, 59)
set(Calendar.MILLISECOND, 999)
},
titleText = "Time", // optional, default is "Time"
applyButtonText = "Apply", // optional, default is "Apply"
cancelButtonText = "Cancel", // optional, default is "Cancel"
onSnappedTime = { snappedTime, timeFormat -> /* Handle snapped time here */ }, // optional, default is an empty function
onDismissRequest = { /* Handle dismiss request here */ }, // required, no default
onChevronIconClick = { /* Handle chevron icon click here */ }, // optional, default is an empty function
onApply = { selectedTime -> /* Handle apply action here */ }, // required, no default
onCancel = { /* Handle cancel action here */ } // required, no default
)
For more details visit Time Picker documentation
Titled Section #
TitledSection(
title = "title",
modifier = Modifier, // optional
subtitle = "subtitle", // optional
caption = "caption", // optional
description = "description", // optional
horizontalAlignment = Alignment.Start, // optional
variant = TitledSectionVariant.Level1, // optional
)
- For more details visit Titled Section documentation
Tooltip #
Tooltip(
text = "Tooltip text",
supportingText = "Supporting text goes here.", // optional
arrowDirection = ArrowDirection.Top, // optional
dotColor = YassirTheme.colors.labelNeutralDefault, // optional
invertedColors = false // optional
)
- For more details visit Tooltip documentation
Top Bar #
- Top Bar with Textual Button Action and Title Content
TopBar(
contentType = TopBarContentType.Title(
title = "Title",
subtitle = "Subtitle",
ratingText = "4.5"
),
actionType = TopBarActionType.Button(
text = "Button",
onClick = { /* action */ }
),
showBackground = true, // optional
leadingIconClick = { /* action */ } // optional
)
- Top Bar With Actions Bar Action and Address Content
TopBar(
contentType = TopBarContentType.Address(
title = "Title",
subtitle = "Subtitle",
),
actionType = TopBarActionType.Actions(
firstAction = TopBarAction(
iconRes = DrawableR.ic_plus,
onClick = { /* action */ }
),
secondAction = TopBarAction(
iconRes = DrawableR.ic_lock,
onClick = { /* action */ }
),
thirdAction = TopBarAction(
iconRes = DrawableR.ic_coins_hand,
onClick = { /* action */ }
)
),
showBackground = true, // optional
leadingIconClick = { /* action */ } // optional
)
- Top Bar with Avatar Action and Search Input Content
TopBar(
contentType = TopBarContentType.Search(
value = "",
placeholder = "Search",
onValueChange = { /* action */ },
),
actionType = TopBarActionType.Avatar(
imageUrl = "",
onClick = {/* action */}
),
showBackground = true, // optional
leadingIconClick = { /* action */ } // optional
)
- Top Bar with Switch Action and Dropdown Input Content
TopBar(
contentType = TopBarContentType.DropDown(
label = "Button",
onClick = { /* action */ }
),
actionType = TopBarActionType.Switch(
checked = true,
enabled = true,
title = "ON",
onToggle = { /* action */ }
),
showBackground = true, // optional
leadingIconClick = { /* action */ } // optional
)
- Top Bar with Slot Action and Title Content
TopBar(
contentType = TopBarContentType.Title(
title = "Title",
subtitle = "Subtitle",
ratingText = "4.5"
),
actionType = TopBarActionType.Slot(
slot = { TopBarSlot() }
),
showBackground = true, // optional
leadingIconClick = { /* action */ } // optional
)
- For more details visit Top Bar documentation