基础

Item 信息条目

用于信息条目场景的 MoriUI 组件。

资源

导入

import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from 'moriui'

组合方式

Item 通过 Media、Content、Actions、Header、Footer 组合结构；ItemGroup 与 ItemSeparator 组织列表。

Item 与 Field

展示信息与操作入口使用 Item；表单标签、描述、校验和控件关系应使用 Field。

变体

variant 支持 default、outline 与 muted，用于区分条目表面层级。

尺寸

size 支持 default、sm 与 xs，并同步调整间距和媒体尺寸。

RTL

条目继承 dir，媒体、内容和操作按逻辑方向排列。

示例

概览

媒体、内容和状态操作组成完整条目。

组件规范.md

今天 12:30 更新

已同步

<script setup lang="ts">
  import { FileText } from '@lucide/vue'
  import {
    Badge,
    Item,
    ItemActions,
    ItemContent,
    ItemDescription,
    ItemMedia,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item class="w-full max-w-md">
    <ItemMedia variant="icon">
      <FileText class="size-4" />
    </ItemMedia><ItemContent><ItemTitle>组件规范.md</ItemTitle><ItemDescription>今天 12:30 更新</ItemDescription></ItemContent><ItemActions>
      <Badge variant="secondary">
        已同步
      </Badge>
    </ItemActions>
  </Item>
</template>

变体

对比三种公开表面。

默认条目

描边条目

弱化条目

<script setup lang="ts">
  import {
    Item,
    ItemContent,
    ItemGroup,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <ItemGroup class="w-full max-w-md">
    <Item role="listitem">
      <ItemContent><ItemTitle>默认条目</ItemTitle></ItemContent>
    </Item>
    <Item role="listitem" variant="outline">
      <ItemContent><ItemTitle>描边条目</ItemTitle></ItemContent>
    </Item>
    <Item role="listitem" variant="muted">
      <ItemContent><ItemTitle>弱化条目</ItemTitle></ItemContent>
    </Item>
  </ItemGroup>
</template>

尺寸

对比 default、sm 与 xs。

默认尺寸

小尺寸

超小尺寸

<script setup lang="ts">
  import {
    Item,
    ItemContent,
    ItemGroup,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <ItemGroup class="w-full max-w-md">
    <Item role="listitem">
      <ItemContent><ItemTitle>默认尺寸</ItemTitle></ItemContent>
    </Item>
    <Item role="listitem" size="sm">
      <ItemContent><ItemTitle>小尺寸</ItemTitle></ItemContent>
    </Item>
    <Item role="listitem" size="xs">
      <ItemContent><ItemTitle>超小尺寸</ItemTitle></ItemContent>
    </Item>
  </ItemGroup>
</template>

图标

图标媒体用于文件类条目。

研究摘要

PDF · 2.4 MB

<script setup lang="ts">
  import { FileText } from '@lucide/vue'
  import {
    Item,
    ItemContent,
    ItemDescription,
    ItemMedia,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item class="w-full max-w-md">
    <ItemMedia variant="icon">
      <FileText class="size-4" />
    </ItemMedia><ItemContent><ItemTitle>研究摘要</ItemTitle><ItemDescription>PDF · 2.4 MB</ItemDescription></ItemContent>
  </Item>
</template>

头像

头像媒体用于人员条目。

林

林森

产品设计师

<script setup lang="ts">
  import {
    Avatar,
    AvatarFallback,
    Item,
    ItemContent,
    ItemDescription,
    ItemMedia,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item class="w-full max-w-md">
    <ItemMedia><Avatar><AvatarFallback>林</AvatarFallback></Avatar></ItemMedia><ItemContent><ItemTitle>林森</ItemTitle><ItemDescription>产品设计师</ItemDescription></ItemContent>
  </Item>
</template>

图片

图片媒体用于项目封面。

Nova 控制台

设计系统项目

<script setup lang="ts">
  import {
    Item,
    ItemContent,
    ItemDescription,
    ItemMedia,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item class="w-full max-w-md">
    <ItemMedia variant="image">
      <div class="size-full rounded-md bg-gradient-to-br from-muted to-secondary" role="img" aria-label="项目封面" />
    </ItemMedia><ItemContent><ItemTitle>Nova 控制台</ItemTitle><ItemDescription>设计系统项目</ItemDescription></ItemContent>
  </Item>
</template>

分组

ItemGroup 与 ItemSeparator 构造列表。

账户设置

通知偏好

<script setup lang="ts">
  import {
    Item,
    ItemContent,
    ItemGroup,
    ItemSeparator,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <ItemGroup class="w-full max-w-md">
    <Item role="listitem">
      <ItemContent><ItemTitle>账户设置</ItemTitle></ItemContent>
    </Item>
    <ItemSeparator aria-hidden="true" />
    <Item role="listitem">
      <ItemContent><ItemTitle>通知偏好</ItemTitle></ItemContent>
    </Item>
  </ItemGroup>
</template>

页眉

Header 承载元信息。

发布检查清单

完成类型检查与可访问性验证。

<script setup lang="ts">
  import {
    Badge,
    Item,
    ItemContent,
    ItemDescription,
    ItemHeader,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item class="w-full max-w-md" variant="outline">
    <ItemHeader>
      <Badge variant="secondary">
        文档
      </Badge><span class="text-xs text-muted-foreground">3 分钟前</span>
    </ItemHeader><ItemContent><ItemTitle>发布检查清单</ItemTitle><ItemDescription>完成类型检查与可访问性验证。</ItemDescription></ItemContent>
  </Item>
</template>

链接

通过 as 渲染为完整链接条目。

打开组件 API

查看属性与组合方式。

<script setup lang="ts">
  import {
    Item,
    ItemContent,
    ItemDescription,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item
    as="a"
    href="#item-api"
    class="w-full max-w-md"
    variant="outline"
  >
    <ItemContent><ItemTitle>打开组件 API</ItemTitle><ItemDescription>查看属性与组合方式。</ItemDescription></ItemContent>
  </Item>
</template>

操作入口

Actions 放置条目级更多操作入口。

协作者

管理成员权限

<script setup lang="ts">
  import { User } from '@lucide/vue'
  import {
    Button,
    Item,
    ItemActions,
    ItemContent,
    ItemDescription,
    ItemMedia,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item class="w-full max-w-md">
    <ItemMedia variant="icon">
      <User class="size-4" />
    </ItemMedia><ItemContent><ItemTitle>协作者</ItemTitle><ItemDescription>管理成员权限</ItemDescription></ItemContent><ItemActions>
      <Button size="sm" variant="ghost" aria-label="更多成员操作">
        更多
      </Button>
    </ItemActions>
  </Item>
</template>

RTL

条目支持 RTL 文本流。

إعدادات الحساب

إدارة الملف الشخصي

<script setup lang="ts">
  import {
    Item,
    ItemContent,
    ItemDescription,
    ItemTitle
  } from 'moriui'
</script>

<template>
  <Item dir="rtl" class="w-full max-w-md">
    <ItemContent><ItemTitle>إعدادات الحساب</ItemTitle><ItemDescription>إدارة الملف الشخصي</ItemDescription></ItemContent>
  </Item>
</template>

API

属性	类型	默认值	说明
Item variant	`'default' \| 'outline' \| 'muted'`	`'default'`	条目表面层级。
Item size	`'default' \| 'sm' \| 'xs'`	`'default'`	条目密度。
ItemGroup class	`HTMLAttributes["class"]`	`undefined`	合并到条目分组的调用方类。
ItemSeparator class	`HTMLAttributes["class"]`	`undefined`	合并到条目分隔线的调用方类。
ItemMedia variant	`'default' \| 'icon' \| 'image'`	`'default'`	媒体区域形态。
ItemContent class	`HTMLAttributes["class"]`	`undefined`	合并到条目内容区的调用方类。
ItemTitle class	`HTMLAttributes["class"]`	`undefined`	合并到条目标题的调用方类。
ItemDescription class	`HTMLAttributes["class"]`	`undefined`	合并到条目说明的调用方类。
ItemActions class	`HTMLAttributes["class"]`	`undefined`	合并到条目操作区的调用方类。
ItemHeader class	`HTMLAttributes["class"]`	`undefined`	合并到条目页眉的调用方类。
ItemFooter class	`HTMLAttributes["class"]`	`undefined`	合并到条目页脚的调用方类。
Item as / asChild	`string \| Component / boolean`	`'div' / false`	将 Item 渲染为语义合适的元素。

无障碍说明

可点击整行应把 Item 渲染为 a 或 button，不能依赖 div 点击；ItemGroup 使用 list 语义时，其 Item 子项应显式传入 role=listitem，纯视觉分隔线应从无障碍树隐藏；标题和说明保持可读文本，图标媒体按用途提供 aria-hidden 或名称。

关联组件

用户头像内容卡片