@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