Mojo UI

Appearance

Card 卡片 ​

用于承载信息块、配置项和可选资源。下面按亮色主题和深色主题成组展示，所有示例都保持相同结构，便于直接对比。

基础卡片 ​

Light
基础卡片

用于展示业务对象、配置说明或可操作内容。

Dark
基础卡片

用于展示业务对象、配置说明或可操作内容。

vue
<MoCard>
  <strong>基础卡片</strong>
  <p>用于展示业务对象、配置说明或可操作内容。</p>
</MoCard>

<MoCard theme="dark">
  <strong>基础卡片</strong>
  <p>用于展示业务对象、配置说明或可操作内容。</p>
</MoCard>
Light
模型服务运行中

Qwen 服务实例，当前用于生产环境推理任务。

Dark
模型服务运行中

Qwen 服务实例，当前用于生产环境推理任务。

vue
<MoCard>
  <template #header>
    <strong>模型服务</strong>
  </template>

  <p>Qwen 服务实例，当前用于生产环境推理任务。</p>

  <template #footer>
    <MoButton size="small" type="primary">配置</MoButton>
  </template>
</MoCard>

阴影 ​

Light
Always

始终显示阴影。

Hover

悬浮时显示阴影。

Never

不显示阴影。

Dark
Always

始终显示阴影。

Hover

悬浮时显示阴影。

Never

不显示阴影。

vue
<MoCard shadow="always">Always</MoCard>
<MoCard shadow="hover">Hover</MoCard>
<MoCard shadow="never">Never</MoCard>

边框样式 ​

Light
Solid
Dashed
Dotted
None
Dark
Solid
Dashed
Dotted
None
vue
<MoCard border-style="solid">Solid</MoCard>
<MoCard border-style="dashed">Dashed</MoCard>
<MoCard border-style="dotted">Dotted</MoCard>
<MoCard border-style="none">None</MoCard>

悬浮与动效 ​

Light
Hover + Animated

悬浮时边框高亮并上移。

Hover Only

悬浮时只高亮边框。

No Hover

关闭悬浮交互。

Dark
Hover + Animated

悬浮时边框高亮并上移。

Hover Only

悬浮时只高亮边框。

No Hover

关闭悬浮交互。

vue
<MoCard hoverable animated>Hover + Animated</MoCard>
<MoCard hoverable :animated="false">Hover Only</MoCard>
<MoCard :hoverable="false">No Hover</MoCard>

可选卡片 ​

Light
已选择

支持点击、Enter 和 Space 切换。

未选择

可配合 v-model:selected 使用。

Dark
已选择

支持点击、Enter 和 Space 切换。

未选择

可配合 v-model:selected 使用。

vue
<MoCard selectable v-model:selected="selected">
  <template #selected-icon>✓</template>
  OrcaSlicer
</MoCard>

Overflow ​

Light
Hidden
Overflow Hidden

角标会被卡片边界裁切。

Visible
Overflow Visible

角标可超出卡片边界。

Dark
Hidden
Overflow Hidden

角标会被卡片边界裁切。

Visible
Overflow Visible

角标可超出卡片边界。

vue
<MoCard overflow="hidden">...</MoCard>
<MoCard overflow="visible">...</MoCard>

Body Class ​

vue
<MoCard body-class="custom-card-body">
  自定义内容区域 class
</MoCard>

API ​

属性说明类型默认值
theme主题light | darklight
shadow阴影显示策略always | hover | neverhover
borderStyle边框样式solid | dashed | dotted | nonesolid
hoverable是否启用悬浮状态booleantrue
animated是否启用悬浮上移动效booleantrue
selectable是否可选booleanfalse
selected是否选中，支持 v-model:selectedbooleanfalse
bodyClass内容区类名ClassValue-
overflow溢出策略hidden | visiblehidden

Events ​

事件说明参数
update:selected选中状态变化时触发boolean
select可选卡片被切换时触发boolean

Slots ​

插槽说明
header卡片头部
default卡片主体内容
footer卡片底部
selected-icon选中状态图标