List

Divided rows

A plain vertical list of Items, divided by hairlines — settings rows, a contact list. For collections with paging or a layout switch, use DataView.

Basic

• 2019.04.04 NEW!Blu-ray Disc BOX 発売決定！全25話収録
• 2019.03.20 「冴えない彼女の育てかた Fine」公開日決定
• 2019.02.01 EVENT スペシャルイベント開催
• no meta, plain row

<script setup lang="ts">
import { BlessButton, BlessList, BlessListItem } from "blessing-ui";
</script>

<template>
  <BlessList style="max-width: 640px">
    <BlessListItem meta="2019.04.04" badge href="#"
      >Blu-ray Disc BOX 発売決定！全25話収録</BlessListItem
    >
    <BlessListItem meta="2019.03.20" href="#"
      >「冴えない彼女の育てかた Fine」公開日決定</BlessListItem
    >
    <BlessListItem meta="2019.02.01" badge="EVENT">
      スペシャルイベント開催
      <template #suffix><BlessButton size="sm" variant="outline">詳細</BlessButton></template>
    </BlessListItem>
    <BlessListItem>no meta, plain row</BlessListItem>
  </BlessList>
</template>

• It is a <ul role="list">: the role keeps it announced as a list in Safari, which drops list semantics from unstyled lists.
• Put BlessItems (or your own <li>s) in it; divided (default) draws the hairlines.
• BlessListItem is a row: an optional meta (a date) with a dash, a badge (true shows NEW!), the title, and a #suffix. With href the row is a link (through your router when provided).

Usage

import { BlessList, BlessListItem } from "blessing-ui";

API

BlessList

Props

Name	Type	Default	Description
divided	boolean	true

Slots

Name	Scope	Description
default	—

BlessListItem

Props

Name	Type	Default	Description
meta	string	—	leading meta, e.g. date
badge	string | boolean	—	badge text; true = NEW!
href	string	—

Slots

Name	Scope	Description
meta	—
default	—
suffix	—