List Tile
BsListTile is a component used to display information. It can contain an image, content, actions, subheaders and much more. BsListTile represents content in such a way which makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.
Overview
For the <bs-list-tile> to work properly, it needs to be placed inside the <bs-list-view>. After that, you can arrange the list items to display the information in an organized way.
Images
The <bs-list-tile-leading> has built-in support for displaying image, and additionally we can use <bs-icon> inside the <bs-list-tile-action> to display an icon. And place <bs-list-tile-title> inside <bs-list-tile-content> to display the title. See example below, to learn how to display image with title and icon correctly.
Multiline Content
Sometimes our page may contains data list with complex structures. For example, we want to display a list of data which contains image, title, description and another content. Example below will shows you how to create this complex data list structures.
Updated on v2.0.0Another Content Title
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua.
Security Warning
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use raw-html property on trusted content and never on user-provided content.
Color
We can also make <bs-list-tile> to have a background color other than white. To achieve this, we need to set the color property of <bs-list-view> component to the desired color name.
Another Content Title
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua.
TIP
Any MDBootstrap Color variants and Material Color variants can be applied to the color property.
Manageable State
Manage by ListView
If property navigable, url or path of <bs-list-tile> is defined explicitly, then the active state of <bs-list-tile> can be manage automatically by <bs-list-view> component when <bs-list-tile> is clicked.
Manage manually
If you wish to manage the <bs-list-tile> state manually, define the individual-state property of the <bs-list-view> component explicitly.
Navigation
Additionaly <bs-list-tile> can also be used to create navigation menus. Below is the built-in styles to decorate the navigation menus created with <bs-list-tile> component.
Item Padding
Item padding can be create using the space-around property of the <bs-list-view> component. Valid values for the space-around property are: left, right or both.
Item border
We can also give a border to the active navigation's menu. To achieve this, sets the item-border-variant property of <bs-list-view> component with value: left, right, left-right, top, bottom, or top-bottom.
Rounded style
Additionaly, we can also add additional style appearance to the navigation's menu. There are two built-in style appearance, which are: Rounded and Rounded Pill. To achieve this, sets the item-rounded property of <bs-list-view> explicitly to create rounded style, or item-rounded-pill to create rounded pill style to an active navigation menu.
Usage Example
The following are a collection of examples that demonstrate more advanced use of the <bs-list-tile>.
Contact Details
Used with Input Controls
Sometimes we want to create a complex page layout like android setting. <bs-list-tile> also can be used to create this page. We can place some input controls inside the component to enable/disable the application setting. Example below will shows you how to create application setting page layout.
Inside Side Drawer
<bs-list-tile> can also be used inside <bs-side-drawer> to create side navigation menus.
CSS Variables
Added since v2.0.0List View
--md-listview-padding-x: 0;
--md-listview-padding-y: 0.5rem;
--md-listview-bg: #{$color};List Tile
$padding-base: 1rem;
$padding-sm: 0.5rem;
$font-size-base: 1rem;
--md-tile-minheight: 2.5rem;
--md-tile-action-minwidth: 1.5rem;
--md-tile-spacing-x: #{$padding-base - .5};
--md-tile-spacing-y: .375rem;
--md-tile-padding-x: #{$padding-base};
--md-tile-padding-y: #{$padding-sm};
--md-tile-title-font-size: #{$font-size-base};
--md-tile-title-font-weight: 400;
--md-tile-subtitle-font-size: #{calc($font-size-base * 90/100)};
--md-tile-hover-bg: #{$tile-hover-bg};
--md-tile-action-color: #{$tile-leading-color};
--md-tile-leading-color: #{$tile-leading-color};
--md-tile-title-color: #{$tile-title-color};
--md-tile-subtitle-color: #{$tile-subtitle-color};
--md-tile-active-bg: #{$tile-active-bg};
--md-tile-active-indicator-border: 4px;
--md-tile-active-action-color: #{$tile-active-leading-icon-color};
--md-tile-active-leading-color: #{$tile-active-title-color};
--md-tile-active-leading-icon-color: #{$tile-active-leading-icon-color};
--md-tile-active-title-color: #{$tile-active-title-color};
--md-tile-active-title-font-weight: 500;
--md-tile-active-subtitle-color: #{$tile-active-subtitle-color};
--md-tile-active-indicator-border-color: #{$tile-indicator-border-color};
--md-tile-disable-action-color: #{$tile-disable-leading-color};
--md-tile-disable-leading-color: #{$tile-disable-leading-color};
--md-tile-disable-title-color: #{$tile-disable-title-color};
--md-tile-disable-subtitle-color: #{$tile-disable-subtitle-color};API Reference
BsListView
BsListTile
BsListTileAction
A container for less important parts of item or for actionable component.
BsListTileLeading
A component for important parts of item. An avatar, image, or icon is usually placed inside this component.
BsListTileContent
A container for item's description. Inside it, you can put component such as <bs-list-tile-title> and <bs-list-tile-subtitle>.