Skip to content

Components

Jump to bottom
Arvindh Sukumar edited this page Feb 7, 2024 · 30 revisions

TUIAppTopBar

TUIAppTopBar is a view that acts as a navigation bar for a screen. The view can be customized with title, left and right bar button items and with search

TUIAppTopBar

Usage:

TUIAppTopBar(
        title = "Lorem Ipsum",
        navigationIcon = TarkaIcons.Regular.ChevronRight20,
    )

TUIAttachmentUpload

Represent file and document attachments with TUIAttachmentUpload. Supports title, image preview and actions to download and delete attachments.

TUIAttachmentUpload

Usage:

// Example Attachment Uploader of Image
TUIAttachmentUpload(
  modifier = Modifier
    .fillMaxWidth()
    .padding(8.dp),
  type = TUIMediaThumbnailType.Image(someImage),
  attachmentName = "document.jpg",
  onAttachmentClick = {
    // Handle attachment click
  },
  onTrailingIconClick = {
    // Handle trailing icon click
  },
  trailingIcon = TarkaIcons.Regular.Send20,
  state = TUIAttachmentUpload.AttachmentState.UpLoading(50),
  showLeadingIcon = true,
)

// Example Attachment Uploader of Video
TUIAttachmentUpload(
  modifier = Modifier
    .fillMaxWidth()
    .padding(8.dp),
  type = TUIMediaThumbnailType.Video(someImage),
  attachmentName = "video.mp4",
  onAttachmentClick = {
    // Handle attachment click
  },
  onTrailingIconClick = {
    // Handle trailing icon click
  },
  trailingIcon = TarkaIcons.Regular.Send20,
  state = TUIAttachmentUpload.AttachmentState.UpLoadSuccessful,
  showLeadingIcon = false,
)

TUIAvatar

Displays user avatar pics or initials.

TUIAvatar

Usage:

TUIAvatar(
    modifier = Modifier.size(100.dp),
    avatarType = AvatarType.Icon(Icons.Default.Person),
    avatarSize = AvatarSize.M,
    showBadge = true
)

TUIBadge

A view that displays a badge with an optional count. The badge is a pill shape with a background color of error and a text color of onError. The count is displayed in the center of the badge and is optional.

Can be used standalone, or as a view modifier to apply a badge on any view.

TUIBadge

Usage:

// Displaying a badge with count
TUIBadge(count = 2, badgeSize = BadgeSize.M)

// Displaying a badge without count
TUIBadge(badgeSize = BadgeSize.S)

// Displaying a badge with custom color
TUIBadge(count = 8, badgeSize = BadgeSize.L, color = Color.Green)

TUIButton

Buttons with a variety of styles and sizes.

TUIButton

Usage:

//Error Button
TUIButton(
  label = "Error Button",
  height = M,
  buttonStyle = ERROR,
  onClick = { /*Handle click*/ }
  )

// Primary Button with text label
TUIButton(
  label = "Primary Button",
  height = ButtonSize.M,
  buttonStyle = ButtonStyle.PRIMARY,
  onClick = {
    // Handle button click
  }
)

// Secondary Button with leading icon
TUIButton(
  label = "Secondary Button",
  height = ButtonSize.M,
  buttonStyle = ButtonStyle.SECONDARY,
  leadingIcon = TarkaIcons.Regular.ClearFormatting16,
  onClick = {
    // Handle button click
  }
)

// Ghost styled Button with trailing icon
TUIButton(
  label = "Ghost Button",
  height = ButtonSize.L,
  buttonStyle = ButtonStyle.GHOST,
  trailingIcon = TarkaIcons.Regular.ClearFormatting16,
  onClick = {
    // Handle button click
  }
)

TUIChip

Small button-like component, useful for displaying contextual information.

TUIChip

Usage:

//Assist Chip
TUIChip(
    type = ChipType.Assist(),
    label = "Assist",
    onClick = { /* Handle chip click */ }
)

//Input Chip
TUIChip(
    type = ChipType.Input(
    content = ChipLeadingContent.Icon(icon = TarkaIcons.Regular.Search24),
    trailingIcon = TarkaIcons.Regular.ClearFormatting16,
    containerColor = Color.Gray
    ),
    label = "Input",
    onClick = { /* Handle chip click */ },
    onDismissClick = { /* Handle dismiss click */ }
)

//Suggestion Chip
TUIChip(
    type = ChipType.Suggestion(image = TarkaIcons.Regular.Info24),
    label = "Suggestion",
    onClick = { /* Handle chip click */ }
)

//Filter Chip
TUIChip(
    type = ChipType.Filter(
      selected = true,
      showLeadingCheck = true,
      showTrailingDismiss = true,
      showTrailingCaret = true,
      badgeCount = 3,
      trailingIcon = TarkaIcons.Regular.Warning24
    ),
    label = "Filter",
    onClick = { /* Handle chip click */ },
    onDismissClick = { /* Handle dismiss click */ }
)

TUIDraggableCard

Component with a built-in drag handle, that can be used to contain components meant to be dragged, such as for re-ordering.

TUIDraggableCard

Usage:

// Example Draggable card with switch
TUIDraggableCard(
      modifier = Modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Min),
      dragIconModifier = Modifier
        .size(24.dp)
        .background(MaterialTheme.colorScheme.secondary)
        .padding(8.dp),
      title = "Description 1",
      switchCheckedState = true,
      onSwitchCheckedChange = {
        // Handle switch state change
      },
)

// Example Draggable card without switch
TUIDraggableCard(
      modifier = Modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Min),
      dragIconModifier = Modifier
        .size(24.dp)
        .background(MaterialTheme.colorScheme.secondary)
        .padding(8.dp),
      title = "Description 1",
      switchCheckedState = false,
      onSwitchCheckedChange = {
        // Handle switch state change
      },
)

TUIFloatingActionButton

Floating action button with customisable sizes, colors and icons.

TUIFloatingActionButton

Usage:

// Small FAB with default icon
TUIFloatingActionButton(
  fabSize = FloatingActionButtonSize.S,
  icon = TarkaIcons.Regular.Send20,
  onClick = {
    // Handle FAB click
  }
)

// Large FAB with another custom icon
TUIFloatingActionButton(
  fabSize = FloatingActionButtonSize.L,
  icon = TarkaIcons.Regular.Edit16,
  onClick = {
    // Handle FAB click
  }
)

TUIIconButton

Buttons containing only icons, to be used in toolbars and other places where space is a premium.

TUIIconButton

Usage:

// Large IconButton with default style
TUIIconButton(
  icon = TarkaIcons.Regular.Delete24,
  buttonSize = IconButtonSize.L,
  iconButtonStyle = IconButtonStyle.defaultStyle,
  onIconClick = {
    // Handle IconButton click
  }
)

// Medium IconButton with outline style
TUIIconButton(
  icon = TarkaIcons.Regular.Edit16,
  buttonSize = IconButtonSize.M,
  iconButtonStyle = IconButtonStyle.OUTLINE,
  onIconClick = {
    // Handle IconButton click
  }
)

// Small IconButton with Ghost icon
TUIIconButton(
  icon = TarkaIcons.Regular.TextClearFormatting16,
  buttonSize = IconButtonSize.S,
  iconButtonStyle = IconButtonStyle.GHOST,
  onIconClick = {
    // Handle IconButton click
  }
)

TUIInputField

Component for text input, with a title and multiple configuration options - including trailing action buttons, focus highlighting, error or other helper text, and more.

TUIInputField

// Example Simple InputField with label
TUIInputField(
  modifier = Modifier
    .fillMaxWidth()
    .height(IntrinsicSize.Min),
  value = "",
  label = "Label",
  onValueChange = {
    // Handle input field value change
  },
  status = TUIInputFieldStatus.Normal
)

// Example InputField with leading icon and error status
TUIInputField(
  modifier = Modifier
    .fillMaxWidth()
    .height(IntrinsicSize.Min),
  value = "",
  label = "Label",
  onValueChange = {
    // Handle input field value change
  },
  status = TUIInputFieldStatus.Error,
  leadingContent = TUIInputFieldContentType.Icon(TarkaIcons.Regular.Mail12),
  helperMessage = "Please enter a valid email address"
)

// Example InputField with trailing icon and custom shape
TUIInputField(
  modifier = Modifier
    .fillMaxWidth()
    .height(IntrinsicSize.Min),
  value = "",
  label = "Label",
  onValueChange = {
    // Handle input field value change
  },
  status = TUIInputFieldStatus.Normal,
  trailingContent = TUIInputFieldContentType.Icon(TarkaIcons.Regular.LockClosed12),
  inputShape = CutCornerShape(topEnd = 8.dp, bottomEnd = 8.dp)
)

TUIMenuItem

Use TUIMenuItem for individual menu options in a TUIMobileOverlayMenu

TUIMobileOverlayItem

Usage:

TUIMenuItem(
      modifier = Modifier,
      title = "Label",
      isSelected = false,
      style = MenuItemStyle.Title,
      leadingContent = MenuItemLeadingContentType.Icon(TarkaIcons.Regular.Settings16),
      trailingContent = MenuItemTrailingContentType.Icon(TarkaIcons.Regular.ChevronRight20),
      onMenuItemClick = {
        // Handle menu item click
      },
)

TUIMobileButtonBlock

TUIMobileButtonBlock is a component that shows TUIButtons in a horizontal stack. The view can be customized with different styles, to configure the position of buttons, and its width

TUIMobileButtonBlock

Usage:

TUIMobileButtonBlock(
      primaryButtonLabel = "Label",
      primaryButtonOnClick = {
        // Handle Click
      },
      outlineButtonLabel = "Label",
      outlineButtonOnClick = {
        // Handle Click
      },
      primaryButtonWeight = 1f,
      primaryLeadingIcon = TarkaIcons.Regular.AnimalCat16,
      primaryTrailingIcon = TarkaIcons.Regular.Home12,
      outlineLeadingIcon = TarkaIcons.Regular.FStop16,
      outlineTrailingIcon = TarkaIcons.Regular.Send20,
)

TUIMobileOverlayFooter

Use TUIMobileOverlayFooter to display a list of actions at the bottom of an overlay.

TUIMobileOverlayFooter

Usage:

// Default Overlay Footer
TUIMobileOverlayFooter(Modifier.fillMaxWidth())

// Overlay Footer with left arrow enabled.
TUIMobileOverlayFooter(
        Modifier.fillMaxWidth(),
        showRightArrow = false,
        showLeftArrow = true,
        showMiddleDismiss = false
      )

TUIMobileOverlayHeader

Use TUIMobileOverlayFooter to display the title at the top of an overlay.

TUIMobileOverlayHeader

Usage:

//Without style
TUIMobileOverlayHeader(
  modifier = Modifier.fillMaxWidth(), style = None
)

// Header with title
TUIMobileOverlayHeader(
  modifier = Modifier.fillMaxWidth(),
  style = HeaderWithTitle("Select Asset")
)

// Header with trailing icon
TUIMobileOverlayHeader(
  modifier = Modifier.fillMaxWidth(),
  style = HeaderWithTrailingIcon(
    title = "Select Asset",
    trailingIcon = TarkaIcons.Regular.Dismiss24,
    onTrailingIconClick = { /* Handle trailing icon click */ }
  )
)

//Header with back icon
TUIMobileOverlayHeader(
  modifier = Modifier.fillMaxWidth(),
  style = HeaderWithBackIcon(
    title = "Select Asset",
    onBackIconClick = { /* Handle back icon click */ }
  )

TUINavigationRow

Depicts items that navigate to other screens when tapped.

TUINavigationRow

Usage:

TUINavigationRow(
    title = "Label",
    leadingIcon = TarkaIcons.Regular.Call20,
    onClick = { /*Handle click*/ },
  ) {
    Text(text = "NILESH")
  }

TUIPlayPauseButton



Usage:

TUIPlayPauseButton(
    modifier = Modifier.padding(top = 16.dp),
    buttonSize = PlayPauseButtonSize.M,
    state = PlayPauseButtonState.Pause,
    onClick = { /* Handle pause button click */ }
)

TUIRadioButton

When presenting the user with multiple choices requiring a single selection, TUIRadioButton can be used.

TUIRadioRow

Usage:

// Example RadioButton with default appearance and behavior
TUIRadioButton(
  modifier = Modifier
    .padding(8.dp),
  selected = isSelected,
  onOptionSelected = {
    isSelected = !isSelected
    // Handle radio button selection
  },
)

// Example Disabled RadioButton
TUIRadioButton(
  modifier = Modifier
    .padding(8.dp),
  selected = isSelected,
  enabled = false,
  onOptionSelected = {
    // This callback won't be triggered for a disabled radio button
  },
)

TUISearchBar

TUISearchBar is a view that used for search in a navigation bar. The view can be customized with placeholder, back and right bar button items

TUISearchBar

Usage:

TUISearchBar(
        query = "My Search",
        placeholder = "Search",
        onQueryTextChange = { /* Handle query text change */ },
        trailingIcon = TarkaIcons.Filled.Dismiss16,
        leadingIcon = TarkaIcons.Regular.BarcodeScanner24,
        onLeadingIconClick = { /* Handle leading icon click */ },
        modifier = Modifier.padding(10.dp),
      )

TUISelectionCard

TUISelectionCard is a container view that displays title and description with selection color

TUISelectionCard

Usage:

// Example Selection card with primary and secondary descriptions
TUISelectionCard(
  modifier = Modifier
    .fillMaxWidth()
    .padding(8.dp),
  leadingIcon = TarkaIcons.Regular.Send20,
  label = "Label",
  primaryDescription = "Description 1",
  secondaryDescription = "Description 2",
  primaryDetails = "Details 1",
  secondaryDetails = "Details 2",
  secondaryDetailStyle = SecondaryDetailsStyle.NORMAL,
  badgeCount = 4,
  showTrailingIcon = true,
  isSelected = true,
  showCheckMarkIcon = true,
  onCardClicked = {
    // Handle card click
  },
)

// Example Selection card without secondary details
TUISelectionCard(
  modifier = Modifier
    .fillMaxWidth()
    .padding(8.dp),
  leadingIcon = TarkaIcons.Regular.Edit16,
  label = "Label",
  primaryDescription = "Description",
  onCardClicked = {
    // Handle card click
  },
)

TUISnackBar

A view that displays a message for a brief period of time and then disappears automatically. Use a snackbar to display a brief message at the bottom of the screen.

TUISnackBar

Usage:

// Create a snackBarState to track and control the snackbar
val snackState by remember {
mutableStateOf(
  TUISnackBarState(
    SnackbarHostState(), Error, Filled.Info24
  )
)
}

// When you want to show it, use the following
snackState.showSnackBar("Message")

TUITab

TUITab

Usage:

// Example Tab with default appearance
TUITab(
  modifier = Modifier
    .width(105.dp)
    .padding(8.dp),
  title = "Tab 1",
  isSelected = true,
  leadingIcon = TarkaIcons.Regular.Send20,
  onTabClicked = {
    // Handle tab click
  },
)

TUITabBar

A custom TabBar view that displays a list of tabs with a selection indicator.

TUITabBar

Usage:

// Example TabBar with custom appearance
TUITabBar(
  modifier = Modifier
    .fillMaxWidth()
    .padding(8.dp),
  tabItems = listOf(
    TabItem("Tab", leadingTabIcon = Regular.Circle12),
    TabItem("Tab", leadingTabIcon = Regular.Circle12),
    TabItem("Tab", leadingTabIcon = Regular.Circle12)
  ),
  selectedTabIndex = selectedTabIndex,
  onTabChanged = {
    selectedTabIndex = it
    // Handle tab change
  },
)

TUITag

Useful for showing contextual information that is read-only.

TUITag

Usage:

// Normal tag with high priority
TUITag(
    title = "Title",
    tagType = TagType.HIGH,
    tagSize = TagSize.M,
    leadingIcon = TarkaIcons.Regular.Circle12,
    onClick = { /* Handle tag click */ }
)

// Large tag with Custom type
TUITag(
    title = "Title",
    tagType = TagType.CUSTOM(
        bgContentColor = TUITheme.colors.warning,
        titleColor = TUITheme.colors.onWarning,
        iconTint = TUITheme.colors.onWarning
    ),
    tagSize = TagSize.L,
    trailingIcon = TarkaIcons.Regular.Warning12,
    onClick = { /* Handle tag click */ }
)

TUITextRow

TUITextRow is a view that displays a title and an optional description in a vertical stack. The view can be customized with different styles, such as displaying only the title or displaying both the title and description.

TUITextRow

Usage:

TUITextRow(title = "Title",
    style = Title,
    infoIcon = TarkaIcons.Regular.ChevronRight20,
    onTextRowClick = { /* Handle text row click */ },
    onInfoIconClick = { /* Handle info icon click */ }
  )

TUIToggleRow




Usage:

// Example Toggle row with title only
TUIToggleRow(
    title = "Title",
    style = ToggleRowStyle.Title
)

// Example Toggle row with title and description
TUIToggleRow(
    title = "Title",
    style = ToggleRowStyle.TitleWithDescription("Description")
)
Clone this wiki locally