List

List

A list is a great way to display information one line at a time. Think of a list as a vertical table. You can create a list by either passing in an array on items into the items property, or importing the ListItem or ListItemTimeline components and adding them into the List.




Props


type string standard
The type of list that you want to show. There are currently two types of lists that are supported. standard is the default list, and timeline if you want a timeline list.


items array<ListItem|ListItemTimeline>
An array items items that list list will have. Each item is an object. You only need to pass in the items prop if you are creating the list programmatically. You can also import ListItem or ListItemTimeline and add them individually.

Show Details
item[].label string
This is the label at the top of the list. It should describe what the text is that the user is seeing.
item[].text string
This is the main content of of list.
item[].href string
If you want the list item to be a link, pass in the href.
item[].new_page function
If the item is an href, pass false if you don't want the href to be opened in a new tab.
item[].icon string
You can include an icon on the right side of the list. You can pass an imported icon, or use the bundled common icons for the list which include copy, download, edit, and trash
item[].onclick function
If you have an icon, you can pass a function that will run when a user clicks on an icon. Useful for downloading some content or copying the text that's in the List.
item[].active boolean
If the list type is a timeline, you can set the timeline bubble to be active, which will change it's color to green
item[].pulse string
If the list type is a timeline, and the item is active, it will be pulsing. You can turn this off by passing false to this attribute.
item[].color string
If the list type is a timeline, you can edit the color of the dot.

To add a line break between filter options, you can just add an option with a string value of { divider: true }


Standard List
Label
Simple List Item
Download
Icon Example
Icon
copy
Icon Example
Icon
edit
Icon Example
Icon
trash
Icon Example
Icon
Tag Label
Tag Example
Tags Can Be Used Without Labels
Timeline List
Label
List test
Label
List test
Icon
Label
List test
Icon
Label
List test
Label
List test
<script>
  import { List } from "bubbles-ui";

  // If you want a more complicated ListItem, you can slot your own UI
  //import { List, ListItem } from "bubbles-ui";

  // <List>
  //   <ListItem>
  //     <div>
  //       add content here
  //     </div>
  //   </ListItem>
  // </List>
</script>

<List
  items={[
    {
      label: "Label",
      text: "Simple List Item",
    },
    {
      label: "Label",
      text: "Example with href",
      href: "https://google.com",
      new_page: true,
    },
    {
      label: "Download",
      text: "Icon Example",
      icon: "download",
      onclick: () => {
        alert("List clicked");
      },
    },
    {
      label: "copy",
      text: "Icon Example",
      icon: "copy",
      onclick: () => {
        alert("List clicked");
      },
    },
    {
      label: "edit",
      text: "Icon Example",
      icon: "edit",
      onclick: () => {
        alert("List clicked");
      },
    },
    {
      label: "trash",
      text: "Icon Example",
      icon: "trash",
      onclick: () => {
        alert("List clicked");
      },
    },
    {
      label: "Tag Label",
      tag: {
        label: "Tag Example",
        color: "primary",
      },
    },
    {
      tag: {
        label: "Tags Can Be Used Without Labels",
        color: "error",
      },
    },
  ]}
/>

<List
  type="timeline"
  items={[
    {
      label: "Label",
      text: "List test",
      href: "https://google.com",
      new_page: true,
      active: false,
    },
    {
      label: "Label",
      text: "List test",
      icon: "edit",
      active: true,
      pulse: false, //no pulsing
      color: "dark", //changed color
    },
    {
      label: "Label",
      text: "List test",
      icon: "edit",
      active: true,
    },
    {
      label: "Label",
      text: "List test",
      active: true,
      color: "primary",
    },
    {
      label: "Label",
      text: "List test",
      active: true,
      color: "error",
    },
  ]}
/>