AListView

AListView is a list container with configurable borders (type: borderless, bordered, deep). Pair it with AListViewItem children — each item takes a label and inherits the parent’s type and itemHeight automatically.

Import

import { ListView, ListViewItem } from '@any-design/anyui/vue';
// React:  import { ListView, ListViewItem } from '@any-design/anyui/react';
// Svelte: import { ListView, ListViewItem } from '@any-design/anyui/svelte';

Basic usage

<template>
  <AListView type="bordered">
    <AListViewItem label="Inbox" />
    <AListViewItem label="Sent" />
    <AListViewItem label="Drafts" />
  </AListView>
</template>

Examples

Borderless

Use type="borderless" for a clean, flat look.

<template>
  <AListView type="borderless">
    <AListViewItem label="Settings" />
    <AListViewItem label="Help" />
  </AListView>
</template>

Fixed item height

Set itemHeight to give every item a uniform height.

<template>
  <AListView type="bordered" :item-height="56">
    <AListViewItem label="Row one" />
    <AListViewItem label="Row two" />
    <AListViewItem label="Row three" />
  </AListView>
</template>

Props

Prop	Type	Default	Description
type	‘borderless’ | ‘bordered’ | ‘deep’	undefined	Visual style.
fit	Boolean	true	Fit parent width.
itemHeight	Number | String	undefined	Fixed item height (inherited by items).

Slots

Slot	Props	Description
default	—	AListViewItem children.

Notes

The package also registers AListViewItem (exported as ListViewItem). The item takes a label prop and inherits type / itemHeight via inject.

AListView

AListView 是可配置边框（type：borderless、bordered、deep）的列表容器。配合 AListViewItem 子项使用 —— 每个子项接收 label，并自动继承父级的 type 与 itemHeight。

引入

import { ListView, ListViewItem } from '@any-design/anyui/vue';
// React:  import { ListView, ListViewItem } from '@any-design/anyui/react';
// Svelte: import { ListView, ListViewItem } from '@any-design/anyui/svelte';

基础用法

<template>
  <AListView type="bordered">
    <AListViewItem label="收件箱" />
    <AListViewItem label="已发送" />
    <AListViewItem label="草稿" />
  </AListView>
</template>

示例

无边框

使用 type="borderless" 获得干净的扁平外观。

<template>
  <AListView type="borderless">
    <AListViewItem label="设置" />
    <AListViewItem label="帮助" />
  </AListView>
</template>

固定行高

设置 itemHeight 让每行保持统一高度。

<template>
  <AListView type="bordered" :item-height="56">
    <AListViewItem label="第一行" />
    <AListViewItem label="第二行" />
    <AListViewItem label="第三行" />
  </AListView>
</template>

属性

属性	类型	默认值	说明
type	‘borderless’ | ‘bordered’ | ‘deep’	undefined	视觉样式。
fit	Boolean	true	撑满父容器宽度。
itemHeight	Number | String	undefined	固定项目高度（被子项继承）。

插槽

插槽	作用域参数	说明
default	—	AListViewItem 子项。

说明

该包还注册了 AListViewItem（以 ListViewItem 导出）。子项接收 label 属性，并通过 inject 继承 type / itemHeight。