Card 卡片

基本展示

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!

html

<j-card>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione
  debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat
  totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</j-card>

展示标题和副标题

通过title和subTitle属性添加标题、副标题

Card Title

Card subtitle sceondary text

html

<j-card title="Card Title" subTitle="Card subtitle sceondary text">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione
  debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat
  totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</j-card>

标题/副标题插槽

通过title、subtitle插槽自定义标题、副标题内容

Card Title

Card Card subtitle sceondary text

html

<j-card>
  <template #title>
    <j-icon :icon="'icon-view-fill'"></j-icon> Card Title
  </template>
  <template #subtitle>
    <j-icon :icon="'icon-email-fill'"></j-icon>
    Card Card subtitle sceondary text
  </template>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione
  debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat
  totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</j-card>

操作（底部）插槽

通过actions 插槽自定义底部内容

Click Me

Clear

阴影级别

阴影级别通过elevation属性设定范围0-24

elevation 4

html

<j-card :elevation="elevation">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione
  debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat
  totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
  <j-slider :min="0" :max="24" v-model="elevation">
    <template #prepend> elevation {{ elevation }} </template>
  </j-slider>
</j-card>

<script setup>
  import { ref } from 'vue';
  const elevation = ref();
</script>

完整案例

Title

Subtitle

Click Me

Clear

html

<j-card title="Title" subTitle="Subtitle">
  <template #header>
    <img
      style="width: 100%; object-fit: cover; aspect-ratio: 16/9"
      src="https://img1.baidu.com/it/u=1556499325,2437056787&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
    />
  </template>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione
  debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat
  totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
  <template #actions>
    <j-button>Click Me</j-button>
    &nbsp;
    <j-button :type="'warn'">Clear</j-button>
  </template>
</j-card>

<script setup>
  import { ref } from 'vue';
  const elevation = ref(4);
</script>

源代码

jayden-ui > card

Card 卡片 ​

基本展示 ​

展示标题和副标题 ​

标题/副标题 插槽 ​

操作（底部）插槽 ​

阴影级别 ​

完整案例 ​

源代码 ​

Card 卡片

基本展示

展示标题和副标题

标题/副标题插槽

操作（底部）插槽

阴影级别

完整案例

源代码