A UI language built for Vue. v1.7.16 is out
UI
GuideDesignComponentsChangelog
GitHub repository10

List

Ordered and unordered lists.

Source
  • Install the dependency and import the style entry
  • Mount the overlay containers at the app root
  • Import components as you need them
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List class="max-w-md">
    <ListItem>Install the dependency and import the style entry</ListItem>
    <ListItem>Mount the overlay containers at the app root</ListItem>
    <ListItem>Import components as you need them</ListItem>
  </List>
</template>
vue

Usage

import { List, ListItem } from '@hina-ui/vue'
ts

List renders a ul by default and ListItem renders each li. The list is indented and its markers are lighter than body text.

  • First item of an unordered list
  • Second item of an unordered list
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List class="max-w-md">
    <ListItem>First item of an unordered list</ListItem>
    <ListItem>Second item of an unordered list</ListItem>
  </List>
</template>
vue

Examples

Ordered lists

ordered renders an ol, turning the markers into numbers.

  1. Install dependencies
  2. Import the styles
  3. Start the dev server
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List ordered class="max-w-md">
    <ListItem>Install dependencies</ListItem>
    <ListItem>Import the styles</ListItem>
    <ListItem>Start the dev server</ListItem>
  </List>
</template>
vue

Nesting

An item can contain another list, and the indentation accumulates with each level.

  • Typography
    • Text
    • Heading
  • Atoms
    • Button
    • Tag
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List class="max-w-md">
    <ListItem>
      Typography
      <List>
        <ListItem>Text</ListItem>
        <ListItem>Heading</ListItem>
      </List>
    </ListItem>
    <ListItem>
      Atoms
      <List>
        <ListItem>Button</ListItem>
        <ListItem>Tag</ListItem>
      </List>
    </ListItem>
  </List>
</template>
vue

Where numbering starts and which way it runs

The component does not intercept attributes, so the native properties of ol can be written directly: start sets the first number and reversed counts down.

  1. Starts at five
  2. Then six
  1. First item, counting down
  2. Second item, counting down
<script setup lang="ts">
  import { List, ListItem, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-md">
    <List ordered :start="5">
      <ListItem>Starts at five</ListItem>
      <ListItem>Then six</ListItem>
    </List>
    <List ordered reversed>
      <ListItem>First item, counting down</ListItem>
      <ListItem>Second item, counting down</ListItem>
    </List>
  </Stack>
</template>
vue

Lists in body content

Prose applies the same styling to native ul and ol elements inside it, so rendered Markdown and rich text need no tag replacement.

Lists in body content need no separate component.

  • An unordered list
  • Matching the component
  1. An ordered list
  2. The same applies
<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-md">
    <p>Lists in body content need no separate component.</p>
    <ul>
      <li>An unordered list</li>
      <li>Matching the component</li>
    </ul>
    <ol>
      <li>An ordered list</li>
      <li>The same applies</li>
    </ol>
  </Prose>
</template>
vue

Accessibility

  • The component renders a native ul or ol, so screen readers announce how many items there are.
  • Items must be direct children of the list; wrapping them in another container makes the announced count wrong.

API

List

Prop
Type
Default
Description
ordered
boolean
false
Render an ordered list
class
string
—
Classes appended to the root
Slot
Description
default
The list items

Remaining attributes are passed to the root element, for example start and reversed.

ListItem

Prop
Type
Default
Description
class
string
—
Classes appended to the root
Slot
Description
default
The item’s content, which may nest another list

Remaining attributes are passed to the root element, for example value to set one item’s number in an ordered list.