ListTile

Overview

The ListTile component is a versatile and fixed-height element designed to efficiently display information. It is structured to include a title, subtitle, and leading or trailing components, making it an ideal choice for presenting concise and organized data. The design of ListTile allows for a clear and accessible presentation of content, enhancing the user experience by providing easily interpretable information at a glance. This component is highly customizable, offering various styling options to align with the specific aesthetic requirements of your application.

Sample JSON

listTile.json

{
  "type": "listTile",
  "data": {
    "title": {
      "type": "text",
      "data": {
        "text": "Hello World!"
      },
      "style": {
        "fontSize": 18,
        "fontColor": "000000",
        "fontWeight": "semiBold"
      }
    },
    "subtitle": {
      "type": "text",
      "data": {
        "text": "This is a test description."
      },
      "style": {
        "fontSize": 14,
        "fontColor": "666666",
        "fontWeight": "regular"
      }
    },
    "leading": {
      "type": "card",
      "data": {
        "child": {
          "type": "networkImage",
          "data": {
            "imageUrl": "https://i.imgur.com/Ku9pGpA.png"
          },
          "style": {
            "height": 54,
            "width": 54,
            "scale": "fit",
            "cornerRadius": 12
          }
        }
      },
      "style": {
        "width": 70,
        "height": 70,
        "backgroundColor": "EA6830",
        "borderRadius": 16
      }
    },
    "trailing": {
      "type": "icon",
      "data": {
        "icon": "chevron.right"
      },
      "style": {
        "color": "000000"
      }
    }
  },
  "style": {
    "backgroundColor": "f8f8f8",
    "borderRadius": 20,
    "height": 2,
    // "width": 320,
    "padding": {
      "top": 5,
      "right": 0,
      "bottom": 5,
      "left": 0
    }
  }
}

This configuration creates a ListTile with a primary title "Hello World!", a subtitle "This is a test description.", and a leading image. The tile is further enhanced with a trailing icon indicating the possibility for interaction. The design elements such as font size, color, and weight for the title and subtitle are carefully chosen to ensure readability and visual hierarchy. The leading section features a rounded card containing a network image, adding visual interest and context to the tile. The overall style of the ListTile, including its background color, border radius, and dimensions, is defined to create a cohesive and attractive appearance that can easily integrate into various UI designs.

Data Properties

The data properties define the content of the ListTile component. The following table lists the available data properties for the ListTile component:

Property	Type	Description
title	Component	The component to display the primary content of the list tile.
subtitle	Component	The component to display additional content below the title.
leading	Component	The component to be displayed at the leading position of the tile.
trailing	Component	The component to be displayed at the trailing position of the tile.

title

• Type: Component
• Description: Represents the primary content or heading of the ListTile. This is typically a text component that contains the main label or title of the ListTile.

subtitle

• Type: Component
• Description: Provides secondary information related to the title. This component is usually displayed below the title and offers additional details or context.

leading

• Type: Component
• Description: Placed at the start (left side) of the ListTile. This component can be an icon, an image, or any other visual element that introduces or complements the tile's content.

trailing

• Type: Component
• Description: Positioned at the end (right side) of the ListTile. It's often used for icons indicating actions like navigation or to provide additional information related to the ListTile's content.

Style Properties (Optional)

info

The style properties are optional. If you don't specify any style properties, the component will use the default values.

The following table lists the available style properties for the ListTile component:

Certainly! Here is the updated table with the platform column moved between the type and required columns:

Property	Type	Platform	Required	Description
backgroundColor	String	android, iOS	false	The background color of the ListTile.
borderColor	String	android, iOS	false	The color of the border surrounding the ListTile.
borderColorDark	String	android, iOS	false	The border color of the ListTile in dark mode.
borderWidth	Float	android, iOS	false	The thickness of the border around the ListTile.
borderRadius	Float	android, iOS	false	The curvature radius of the ListTile's corners.
elevation	Float	android	false	The shadow size under the ListTile, creating a 3D effect.
shadowColor	String	iOS	false	The color of the shadow cast by the ListTile.
shadowColorDark	String	iOS	false	The color of the shadow cast by the ListTile in dark mode.
shadowRadius	Float	iOS	false	The blur radius of the shadow under the ListTile.
height	Float	android, iOS	false	The vertical dimension of the ListTile.
width	Float	iOS	false	The horizontal dimension of the ListTile.
padding	JSON	android, iOS	false	The internal spacing of the ListTile, specified for top, right, bottom, and left.
cardY	Float	iOS	false	An amount to offset the shadow vertically from the view.

backgroundColor

• Type: String (optional)
• Description: Sets the background color of the ListTile, enhancing its visual integration within the app's design theme.

borderColor

• Type: String (optional)
• Description: Specifies the color of the ListTile's border, adding definition and contrast to its appearance.

borderColorDark

• Type: String (optional)
• Description: Defines the border color of the ListTile when the app is in dark mode, ensuring visual consistency across different themes.

borderWidth

• Type: Float (optional)
• Description: Determines the thickness of the ListTile's border. A value of 0 can make the border invisible, while a positive value adds a visible border.

borderRadius

• Type: Float (optional)
• Description: Controls the roundness of the ListTile's corners. A higher value results in more pronounced rounding, contributing to the tile's stylistic elements.

elevation

• Type: Float (optional)
• Description: Adjusts the size of the shadow beneath the ListTile, creating a sense of depth and emphasis within the layout.

shadowColor

• Type: String (optional)
• Description: Sets the color of the shadow cast by the ListTile, which can enhance the visual prominence of the tile.

shadowColorDark

• Type: String (optional)
• Description: Specifies the shadow color for the ListTile in dark mode, maintaining aesthetic consistency across light and dark themes.

shadowRadius

• Type: Float (optional)
• Description: The blur radius for the shadow beneath the ListTile, affecting how diffused or sharp the shadow appears.

height

• Type: Float (optional)
• Description: The height of the ListTile, which can be adjusted to fit the content or to meet specific design requirements.

width

• Type: Float (optional)
• Description: The width of the ListTile, allowing for control over its size and alignment within the layout.

cardY

• Type: Float (optional)
• Description: An amount to offset the shadow vertically from the view.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.