List

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

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 }

Label

Simple List Item

Label

Example with href

Download

Icon Example

copy

Icon Example

edit

Icon Example

trash

Icon Example

Tag Label

Tag Example

Tags Can Be Used Without Labels

Label

List test

Label

List test

Label

List test

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",
    },
  ]}
/>

List

List

Props

Standard List

Timeline List