List

The List component is used to display a list of items in a vertial layout. It is typically used to display a collection of items, such as contacts, messages, or settings.

Usage

import { BakaList, BakaListItem, BakaIcon, BakaText } from "baka-ui";

// Inside your component
<BakaList>
  <BakaListItem>
    <BakaIcon variant={"filled"}>fiber_manual_record</BakaIcon>
    <BakaText>BakaText</BakaText>
  </BakaListItem>
</BakaList>;

List items

The List components contains a collection of ListItem components, each of which could be customized with an icon, text, and other elements.

Basic

The following example demonstrates the List component with a basic list item.

Prefix & Suffix

The ListItem could be customized with a prefix element, such as an icon or an avatar, and a suffix element, such as a icon or a checkbox.

<BakaList>
  <BakaListItem>
    {/* Prefix */}
    <BakaIcon>person</BakaIcon>
    {/* Content */}
    <BakaText>BakaText</BakaText>
    {/* Suffix */}
    <BakaCheckbox />
  </BakaListItem>
</BakaList>

With Avatar

The following example demonstrates the List component with an avatar.

With Icon

The following example demonstrates the List component with an icon.

With Media

The following example demonstrates the List component with media.

Video Media

In order to show a video media, one should additionally pass the variant="video" prop to the ListItem.

With Checkbox

The following example demonstrates the List component with a checkbox.

With Radio

The following example demonstrates the List component with a radio button.

With Switch

The following example demonstrates the List component with a switch.