Loongship UI

Appearance

Card 卡片 ​

组织标题、说明、内容、操作和页脚。

命令行安装 ​

bash
npx @loongship-kit/ui add card

组件结构 ​

角色组件职责使用条件
根组件Card提供卡片容器必需
标题区域CardHeader、CardTitle、CardDescription、CardAction组织标题、描述和顶部操作按需
内容区域CardContent承载主要内容按需
页脚区域CardFooter承载底部操作或补充信息按需

基础用法 ​

Vessel status
Last updated 2 minutes ago
EVER GIVEN is underway using engine.
查看代码
vue
<template>
  <Card>
    <CardHeader>
      <CardTitle>Vessel status</CardTitle>
      <CardDescription>Last updated 2 minutes ago</CardDescription>
    </CardHeader>
    <CardContent>EVER GIVEN is underway using engine.</CardContent>
  </Card>
</template>

操作和页脚 ​

Vessel status
Last updated 2 minutes ago
Destination: Rotterdam · ETA: Aug 2, 18:30
查看代码
vue
<template>
  <Card>
    <CardHeader>
      <CardTitle>Vessel status</CardTitle>
      <CardDescription>Last updated 2 minutes ago</CardDescription>
      <CardAction><Button size="sm" variant="outline">Details</Button></CardAction>
    </CardHeader>
    <CardContent>Destination: Rotterdam · ETA: Aug 2, 18:30</CardContent>
    <CardFooter><Button size="sm">Open vessel</Button></CardFooter>
  </Card>
</template>

表单卡片 ​

Create watchlist
Save vessels that need continuous attention.
查看代码
vue
<template>
  <Card>
    <CardHeader>
      <CardTitle>Create watchlist</CardTitle>
      <CardDescription>Save vessels that need continuous attention.</CardDescription>
    </CardHeader>
    <CardContent>
      <label>
        Watchlist name
        <Input placeholder="High risk vessels" />
      </label>
    </CardContent>
    <CardFooter>
      <Button variant="outline" size="sm">Cancel</Button>
      <Button size="sm">Create</Button>
    </CardFooter>
  </Card>
</template>

API ​

Card（主组件） ​

属性 ​

属性类型默认值说明
classClassValue-根容器自定义类名

插槽 ​

插槽参数说明
default—卡片内容

子组件 ​

CardHeader / CardTitle / CardDescription / CardAction — 标题区域

标题布局

CardHeader 默认单列排列；存在 CardAction 时自动切换为两列网格。CardTitle 不固定标题层级，需要文档语义时可在插槽中放置 h2、h3 等标题元素。

共享属性 ​

属性类型默认值说明
classClassValue-对应区域自定义类名

插槽 ​

组件插槽参数说明
CardHeaderdefault—放置 CardTitle、CardDescription 和 CardAction
CardTitledefault—标题文本或标题元素
CardDescriptiondefault—标题下方的辅助说明
CardActiondefault—标题区右侧的按钮、链接或菜单触发器
CardContent / CardFooter — 内容与页脚区域

共享属性 ​

属性类型默认值说明
classClassValue-对应区域自定义类名

插槽 ​

组件插槽参数说明
CardContentdefault—文本、表单、列表或其他组件
CardFooterdefault—底部操作或补充信息