Yy Craft

主题

卡片 ​

基础卡片 ​

查看示例
vue
<template>
  <yy-card title="标题">
    <template #cover>
      <img
        src="https://avatars.githubusercontent.com/u/137426505"
        width="200"
      >
    </template>
    <template #headerExtra>
      #headerExtra
    </template>
    内容
    <template #footer>
      #footer
    </template>
    <template #action>
      #action
    </template>
  </yy-card>
</template>

可悬浮的卡片 ​

查看示例
vue
<template>
  <yy-card title="可悬浮" hoverable>
    内容
  </yy-card>
</template>

卡片尺寸 ​

查看示例
vue
<template>
  <yy-card title="小卡片" size="small">
    <yy-text code>
      size="small"
    </yy-text>
  </yy-card>
  <yy-card title="中卡片" size="medium">
    <yy-text code>
      size="medium"
    </yy-text>
  </yy-card>
  <yy-card title="大卡片" size="large">
    <yy-text code>
      size="large"
    </yy-text>
  </yy-card>
  <yy-card title="超大卡片" size="huge">
    <yy-text code>
      size="huge"
    </yy-text>
  </yy-card>
</template>

无边框卡片 ​

查看示例
vue
<template>
  <yy-card title="无边框" :bordered="false">
    内容
  </yy-card>
</template>

分段卡片 ​

查看示例
vue
<template>
  <yy-card title="标题" segmented>
    内容
    <template #footer>
      #footer
    </template>
    <template #action>
      #action
    </template>
  </yy-card>
</template>

Props ​

参数说明类型默认值
title标题string | () => VNodeChild-
size尺寸'small' | 'medium' | 'large' | 'huge''medium'
bordered是否有边框booleantrue
hoverable是否可悬浮booleanfalse
segmented分段boolean | CardSegmented-

Slots ​

名称说明
cover封面
headerExtra头部额外
header头部
default内容
footer底部
action操作