List Item

List element

Properties

icon: <smart-icon>

The <smart-icon> component displayed on the left edge of the <list-item>.

contents: { title, subTitle, badge }

• title: string

  Title. Displayed in bold text.

• subTitle: string

  Subtitle. Displayed in gray color and smaller font size.

• badge: string | { badge, style }

  Text icon on the right side of the subtitle.

  • badge: string

    Text for the icon.

  • style: object

    Style of the icon. By default, white text on a red background.

Style

Changing the appearance, position, and geometry of the block.

• width, maxWidth, minWidth
  Width of the block. More details.

• height, maxHeight, minHeight
  Height of the block. More details.

• padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
  Internal padding of the container. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• position
  Positioning method of the block: relative or absolute. More details.

• top, right, bottom, left
  Offset from the original position. More details.

• color
  Text color. More details.

• fontFamily
  Font family name. More details.

• fontSize
  Font size. More details.

• fontStyle
  Ability to set the font to italic. More details.

• fontWeight
  Font weight. More details.

• fontVariant
  Ability to use monospaced digits. More details.

• letterSpacing
  Letter spacing of the font. More details.

• lineClamp
  Limiting text height by the number of lines. More details.

• lineHeight
  The amount of space allocated for one line of text in height. More details.

• textAlign
  Principle of text alignment. More details.

• textDecorationLine
  Adding underline or strikethrough to the text. More details.

• textOverflow
  Method of truncating text when it overflows the container. More details.

• textShadowColor
  Color of the text shadow. More details.

• textShadowOffset
  Shadow offset horizontally and vertically. More details.

• textShadowRadius
  Depth of shadow blur in pixels. More details.

• textTransform
  Transformation of text upon display. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block with its content. More details.

• elevation
  Height of the shadow. More details.

• shadowColor
  Color of the block's shadow. More details.

• flexDirection
  Defines the main axis of the container (direction of blocks in the container). More details.

• flexBasis
  Initial size of the block along the main axis of the container. More details.

• flexGrow
  Growth factor of the block along the main axis of the container. More details.

• flexShrink
  Shrinkage factor of the block along the main axis of the container. More details.

• flex
  Defines the size behavior of the block (growth, shrinkage, and initial size) along the main axis of the container. More details.

• alignItems
  Alignment across the main axis of the container. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

• transform
  Transforming the geometry of blocks and containers in 2D and 3D space. More details.

Examples