Card 卡片

将信息聚合在卡片容器中展示。

基础用法

卡片包含标题，内容以及操作区域。

Card 组件由 header、body 和 footer 组成。其中 header 和 footer 是可选的，其内容可以是字符串或 Leafer 元素。

查看源代码

<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { ElButton, ElCard } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';

  const container = ref();

  onMounted(() => {
    const leafer = new Leafer({
      view: container.value,
      type: 'block',
    });

    const card = new ElCard({
      header: {
        tag: 'Flow',
        width: 360,
        flowAlign: 'center',
        gap: 'auto',
        children: [
          {
            tag: 'Text',
            text: 'Card name',
          },
          new ElButton({ text: 'Operate', type: 'primary', link: true }),
        ],
      },
      footer: 'Footer content',
      children: [
        {
          tag: 'Flow',
          flow: 'y',
          gap: 16,
          children: new Array(4).fill().map((value, index) => ({
            tag: 'Text',
            text: `List item ${index + 1}`,
          })),
        },
      ],
    }, { x: 12, y: 12, width: 400 });

    leafer.add(card);
    leafer.height = leafer.renderBounds.height;
  });
</script>

简单卡片

卡片可以只有内容区域。

查看源代码

<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { ElCard } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';

  const container = ref();

  onMounted(() => {
    const leafer = new Leafer({
      view: container.value,
      type: 'block',
    });

    const card = new ElCard({
      children: [
        {
          tag: 'Flow',
          flow: 'y',
          gap: 16,
          children: new Array(4).fill().map((value, index) => ({
            tag: 'Text',
            text: `List item ${index + 1}`,
          })),
        },
      ],
    }, { x: 12, y: 12, width: 400 });

    leafer.add(card);
    leafer.height = leafer.renderBounds.height;
  });
</script>

有图片内容的卡片

可配置定义更丰富的内容展示。

查看源代码

<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { ElCard } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';

  const container = ref();

  onMounted(() => {
    const leafer = new Leafer({
      view: container.value,
      type: 'block',
    });

    const card = new ElCard({
      header: 'Yummy hamburger',
      children: [
        {
          tag: 'Image',
          url: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          height: 360,
        },
      ],
    }, { x: 12, y: 12, width: 400 });

    leafer.add(card);
    leafer.height = leafer.renderBounds.height;
  });
</script>

带有阴影效果的卡片

你可以定义什么时候展示卡片的阴影效果。

通过 shadow 属性设置卡片阴影出现的时机。该属性的值可以是：always、hover 或 never。

查看源代码

<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { ElCard } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import { Flow } from '@leafer-in/flow';

  const container = ref();

  onMounted(() => {
    const leafer = new Leafer({
      view: container.value,
      type: 'block',
    });

    const card1 = new ElCard({
      shadow: 'always',
      children: [
        {
          tag: 'Text',
          text: 'Always',
        },
      ],
    }, { width: 400 });

    const card2 = new ElCard({
      shadow: 'hover',
      children: [
        {
          tag: 'Text',
          text: 'Hover',
        },
      ],
    }, { width: 400 });

    const card3 = new ElCard({
      shadow: 'never',
      children: [
        {
          tag: 'Text',
          text: 'Never',
        },
      ],
    }, { width: 400 });

    const flow = new Flow({
      x: 12,
      y: 12,
      flow: 'y',
      gap: 20,
      children: [card1, card2, card3],
    });

    leafer.add(flow);
    leafer.height = leafer.renderBounds.height;
  });
</script>

Card Props

属性名	说明	类型	默认值
header	卡片标题	string | IUIInputData	—
footer	卡片页脚	string | IUIInputData	—
children	自定义默认内容	IUIInputData[]	—
shadow	卡片阴影显示时机	'always' | 'never' | 'hover'	'always'