List

I always make a list before I go to the grocery store. Sometimes, I even remember to bring it with me.

Example

Basic

Show Code

<script lang="ts" setup>
import { RList, RListItem } from 'roughness'
</script>

<template>
  <RList>
    <RListItem>Dog Food</RListItem>
    <RListItem>Cat Food</RListItem>
    <RListItem>
      <RText type="warning">Human Food</RText>
    </RListItem>
  </RList>
</template>

• Dog Food
• Cat Food
• Human Food

List Style

Show Code

<script lang="ts" setup>
import { RList, RListItem } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RList list-style="square">
      <RListItem>How are you?</RListItem>
      <RListItem>Fine, thank you.<br>And you?</RListItem>
    </RList>
    <RList list-style="auto">
      <RListItem>4142135623730951</RListItem>
      <RListItem>23606797749979</RListItem>
    </RList>
  </RSpace>
</template>

• How are you?
• Fine, thank you.
  And you?

1. 4142135623730951
2. 23606797749979

Usage

Props

Name	Type	Default Value	Description
listStyle
...			See Space Props. Unlike Space, the default value of List's tag is ul or ol.

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-list-marker-color
--r-list-marker-block-size
--r-list-marker-inline-size
...			See Space Styles.

ListItem Props

Name	Type	Default Value	Description
graphicsOptions

ListItem Slots

Name	Type	Description
default