@skui/list

All the components you need to build your own list

Index

• Basic usage
• List component
• ListItem component
• ListItemContent component
• ListItemImage component

Basic usage

This is an example of how a list is build

<script lang="ts">
  import { List, ListItem, ListItemContent, ListItemImage } from "@skui/list";
</script>

<List>
  <ListItem>
    <ListItemContent primary="Hello World" />
  </ListItem>
  <ListItem>
    <ListItemContent
      primary="This is a basic list"
      secondary="With multi line support"
    />
  </ListItem>
  <ListItem>
    <ListItemImage src="https://via.placeholder.com/32" alt="Placeholder" />
    <ListItemContent primary="With image support" />
  </ListItem>
</List>

List component

This is the base of any list, it will handle the key inputs and scroll to the correct item. It is expected to use ListItem or Separator as it children.

<script lang="ts">
  import { List } from "@skui/list";
</script>

<List />

ListItem component

This component represents a single item inside a list, it will handle all the different states that the item can be in like normal and hover mode and handle all the events.

<script lang="ts">
  import { ListItem } from "@skui/list";
</script>

<ListItem />

Props

| Name | Type | Description | Documentation | | ----------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | onClick | () => void | This function will be executed wheneven the user selects this item | | onHover | () -> void | This function will be executed whenever the user hovers on this item for onHoverTime | | | onHoverTime | number | This defines how long the user needs to hover over this item before the onHover function will be called, It defaults to 3000ms (3s) | | | hoverColor | KaiOS_color | This defines the hover color of the listItem, it defaults to PURPLE | @skui/styles |

ListItemContent component

This component defines the layout of text inside a ListItem. It has support for single and multi-line text and can be used in combination with a ListItemImage to add an image to a ListItem.

<script lang="ts">
  import { ListItem, ListItemContent } from "@skui/list";
</script>

<ListItem>
  <ListItemContent primary="ListItemContent" />
</ListItem>
<ListItem>
  <ListItemContent
    primary="ListItemContent"
    secondary="With multi line support"
  />
</ListItem>

Props

| Name | Type | Description | | --------- | ---------------- | ------------------ | | primary | string | number | The primary line | | secondary | string | number | The secondary line |

ListItemImage component

This component allows you to add an image to a ListItem.

<script lang="ts">
  import { ListItem, ListItemContent, ListItemImage } from "@skui/list";
</script>

<ListItem>
  <ListItemImage src="https://via.placeholder.com/32" alt="Placeholder" />
  <ListItemContent primary="ListItemImage" secondary="Just add an image" />
</ListItem>

props

| Name | Type | Description | | ---- | ------ | ------------------------- | | src | string | The src of the image | | alt | string | The alt text of the image |

License

MIT License

Copyright (c) 2021 Wouter van der Wal