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

Slots

Styles

ListItem Props

ListItem Slots