Element Plus Leafer

Appearance

Button 按钮 ​

常用的操作按钮。

基础用法 ​

使用 type、plain、round 和 circle 来定义按钮的样式。

查看源代码
vue
<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { Flow } from '@leafer-in/flow';
  import { ElButton } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import Search from '@element-plus/icons-svg/search.svg?raw';
  import Edit from '@element-plus/icons-svg/edit.svg?raw';
  import Check from '@element-plus/icons-svg/check.svg?raw';
  import Message from '@element-plus/icons-svg/message.svg?raw';
  import Star from '@element-plus/icons-svg/star.svg?raw';
  import Delete from '@element-plus/icons-svg/delete.svg?raw';

  const container = ref();

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

    const button11 = new ElButton({ text: 'Default' });
    const button12 = new ElButton({ text: 'Primary', type: 'primary' });
    const button13 = new ElButton({ text: 'Success', type: 'success' });
    const button14 = new ElButton({ text: 'Info', type: 'info' });
    const button15 = new ElButton({ text: 'Warning', type: 'warning' });
    const button16 = new ElButton({ text: 'Danger', type: 'danger' });

    const button21 = new ElButton({ text: 'Plain', plain: true });
    const button22 = new ElButton({ text: 'Primary', type: 'primary', plain: true });
    const button23 = new ElButton({ text: 'Success', type: 'success', plain: true });
    const button24 = new ElButton({ text: 'Info', type: 'info', plain: true });
    const button25 = new ElButton({ text: 'Warning', type: 'warning', plain: true });
    const button26 = new ElButton({ text: 'Danger', type: 'danger', plain: true });

    const button31 = new ElButton({ text: 'Round', round: true });
    const button32 = new ElButton({ text: 'Primary', type: 'primary', round: true });
    const button33 = new ElButton({ text: 'Success', type: 'success', round: true });
    const button34 = new ElButton({ text: 'Info', type: 'info', round: true });
    const button35 = new ElButton({ text: 'Warning', type: 'warning', round: true });
    const button36 = new ElButton({ text: 'Danger', type: 'danger', round: true });

    const button41 = new ElButton({ icon: Search, circle: true });
    const button42 = new ElButton({ icon: Edit, type: 'primary', circle: true });
    const button43 = new ElButton({ icon: Check, type: 'success', circle: true });
    const button44 = new ElButton({ icon: Message, type: 'info', circle: true });
    const button45 = new ElButton({ icon: Star, type: 'warning', circle: true });
    const button46 = new ElButton({ icon: Delete, type: 'danger', circle: true });

    const flow = new Flow({
      flow: 'y',
      gap: 10,
      children: [
        {
          tag: 'Flow',
          gap: 10,
          children: [button11, button12, button13, button14, button15, button16],
        },
        {
          tag: 'Flow',
          gap: 10,
          children: [button21, button22, button23, button24, button25, button26],
        },
        {
          tag: 'Flow',
          gap: 10,
          children: [button31, button32, button33, button34, button35, button36],
        },
        {
          tag: 'Flow',
          gap: 10,
          children: [button41, button42, button43, button44, button45, button46],
        },
      ],
    });

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

禁用状态 ​

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 boolean 类型的值。

查看源代码
vue
<template>
  <div ref="container" />
</template>

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

  const container = ref();

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

    const button11 = new ElButton({ text: 'Default', disabled: true });
    const button12 = new ElButton({ text: 'Primary', type: 'primary', disabled: true });
    const button13 = new ElButton({ text: 'Success', type: 'success', disabled: true });
    const button14 = new ElButton({ text: 'Info', type: 'info', disabled: true });
    const button15 = new ElButton({ text: 'Warning', type: 'warning', disabled: true });
    const button16 = new ElButton({ text: 'Danger', type: 'danger', disabled: true });

    const button21 = new ElButton({ text: 'Plain', plain: true, disabled: true });
    const button22 = new ElButton({ text: 'Primary', type: 'primary', plain: true, disabled: true });
    const button23 = new ElButton({ text: 'Success', type: 'success', plain: true, disabled: true });
    const button24 = new ElButton({ text: 'Info', type: 'info', plain: true, disabled: true });
    const button25 = new ElButton({ text: 'Warning', type: 'warning', plain: true, disabled: true });
    const button26 = new ElButton({ text: 'Danger', type: 'danger', plain: true, disabled: true });

    const flow = new Flow({
      flow: 'y',
      gap: 10,
      children: [
        {
          tag: 'Flow',
          gap: 10,
          children: [button11, button12, button13, button14, button15, button16],
        },
        {
          tag: 'Flow',
          gap: 10,
          children: [button21, button22, button23, button24, button25, button26],
        },
      ],
    });

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

链接按钮 ​

查看源代码
vue
<template>
  <div ref="container" />
</template>

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

  const container = ref();

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

    const button11 = new ElButton({ text: 'Plain', link: true });
    const button12 = new ElButton({ text: 'Primary', type: 'primary', link: true });
    const button13 = new ElButton({ text: 'Success', type: 'success', link: true });
    const button14 = new ElButton({ text: 'Info', type: 'info', link: true });
    const button15 = new ElButton({ text: 'Warning', type: 'warning', link: true });
    const button16 = new ElButton({ text: 'Danger', type: 'danger', link: true });

    const button21 = new ElButton({ text: 'Plain', link: true, disabled: true });
    const button22 = new ElButton({ text: 'Primary', type: 'primary', link: true, disabled: true });
    const button23 = new ElButton({ text: 'Success', type: 'success', link: true, disabled: true });
    const button24 = new ElButton({ text: 'Info', type: 'info', link: true, disabled: true });
    const button25 = new ElButton({ text: 'Warning', type: 'warning', link: true, disabled: true });
    const button26 = new ElButton({ text: 'Danger', type: 'danger', link: true, disabled: true });

    const flow = new Flow({
      flow: 'y',
      gap: 10,
      children: [
        {
          tag: 'Flow',
          gap: 10,
          children: [button11, button12, button13, button14, button15, button16],
        },
        {
          tag: 'Flow',
          gap: 10,
          children: [button21, button22, button23, button24, button25, button26],
        },
      ],
    });

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

图标按钮 ​

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

使用 icon 属性来为按钮添加图标。

查看源代码
vue
<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { Flow } from '@leafer-in/flow';
  import { ElButton } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import Edit from '@element-plus/icons-svg/edit.svg?raw';
  import Share from '@element-plus/icons-svg/share.svg?raw';
  import Delete from '@element-plus/icons-svg/delete.svg?raw';
  import Search from '@element-plus/icons-svg/search.svg?raw';
  import Upload from '@element-plus/icons-svg/upload.svg?raw';

  const container = ref();

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

    const button1 = new ElButton({ type: 'primary', icon: Edit });
    const button2 = new ElButton({ type: 'primary', icon: Share });
    const button3 = new ElButton({ type: 'primary', icon: Delete });
    const button4 = new ElButton({ text: 'Search', type: 'primary', icon: Search });
    const button5 = new ElButton({ text: 'Upload', type: 'primary', iconRight: Upload });

    const flow = new Flow({
      gap: 10,
      children: [button1, button2, button3, button4, button5],
    });

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

按钮组 ​

以按钮组的方式出现，常用于多项类似操作。

使用 ElButtonGroup 对多个按钮分组。

查看源代码
vue
<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { Flow } from '@leafer-in/flow';
  import { ElButton, ElButtonGroup, ElIcon } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import ArrowLeft from '@element-plus/icons-svg/arrow-left.svg?raw';
  import ArrowRight from '@element-plus/icons-svg/arrow-right.svg?raw';
  import Edit from '@element-plus/icons-svg/edit.svg?raw';
  import Share from '@element-plus/icons-svg/share.svg?raw';
  import Delete from '@element-plus/icons-svg/delete.svg?raw';

  const container = ref();

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

    const groupButton1 = new ElButton({ text: 'Previous Page', type: 'primary', icon: ArrowLeft });
    const groupButton2 = new ElButton({
      text: 'Next Page',
      type: 'primary',
      children: [
        new ElIcon({
          icon: ArrowRight,
          size: 14,
          color: 'white',
        }),
      ],
    });

    const buttonGroup1 = new ElButtonGroup({
      children: [groupButton1, groupButton2],
    });

    const groupButton3 = new ElButton({ type: 'primary', icon: Edit });
    const groupButton4 = new ElButton({ type: 'primary', icon: Share });
    const groupButton5 = new ElButton({ type: 'primary', icon: Delete });

    const buttonGroup2 = new ElButtonGroup({
      children: [groupButton3, groupButton4, groupButton5],
    });

    const flow = new Flow({
      gap: 10,
      children: [buttonGroup1, buttonGroup2],
    });

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

加载状态按钮 ​

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

查看源代码
vue
<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { Flow } from '@leafer-in/flow';
  import { ElButton } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import Eleme from '@element-plus/icons-svg/eleme.svg?raw';

  const container = ref();

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

    const button1 = new ElButton({ text: 'Loading', type: 'primary', loading: true });
    const button2 = new ElButton({ text: 'Loading', type: 'primary', loading: true, loadingIcon: Eleme });

    const flow = new Flow({
      gap: 10,
      children: [button1, button2],
    });

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

调整尺寸 ​

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性额外配置尺寸，可使用 large 和 small 两种值。

查看源代码
vue
<template>
  <div ref="container" />
</template>

<script setup lang="ts">
  import { Leafer } from 'leafer-ui';
  import { Flow } from '@leafer-in/flow';
  import { ElButton } from 'element-plus-leafer';
  import { onMounted, ref } from 'vue';
  import Search from '@element-plus/icons-svg/search.svg?raw';

  const container = ref();

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

    const button11 = new ElButton({ text: 'Large', size: 'large' });
    const button12 = new ElButton({ text: 'Default' });
    const button13 = new ElButton({ text: 'Small', size: 'small' });

    const button21 = new ElButton({ text: 'Large', round: true, size: 'large' });
    const button22 = new ElButton({ text: 'Default', round: true });
    const button23 = new ElButton({ text: 'Small', round: true, size: 'small' });

    const button31 = new ElButton({ icon: Search, circle: true, size: 'large' });
    const button32 = new ElButton({ icon: Search, circle: true });
    const button33 = new ElButton({ icon: Search, circle: true, size: 'small' });

    const flow = new Flow({
      flow: 'y',
      gap: 10,
      children: [
        {
          tag: 'Flow',
          flowAlign: 'center',
          gap: 10,
          children: [button11, button12, button13],
        },
        {
          tag: 'Flow',
          flowAlign: 'center',
          gap: 10,
          children: [button21, button22, button23],
        },
        {
          tag: 'Flow',
          flowAlign: 'center',
          gap: 10,
          children: [button31, button32, button33],
        },
      ],
    });

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

自定义颜色 ​

你可以自定义按钮的颜色。

我们将自动计算按钮不同状态时的颜色。

查看源代码
vue
<template>
  <div ref="container" />
</template>

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

  const container = ref();

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

    const button1 = new ElButton({ text: 'Default', color: '#626aef' });
    const button2 = new ElButton({ text: 'Plain', color: '#626aef', plain: true });
    const button3 = new ElButton({ text: 'Disabled', color: '#626aef', disabled: true });
    const button4 = new ElButton({ text: 'Disabled Plain', color: '#626aef', plain: true, disabled: true });

    const flow = new Flow({
      gap: 10,
      children: [button1, button2, button3, button4],
    });

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

交互事件 ​

按钮默认提供一个 onClick 点击事件，如果你需要其他事件，可以参考 Leafer UI 的交互事件。

查看源代码
vue
<template>
  <div ref="container" />
</template>

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

  const container = ref();

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

    const button1 = new ElButton({
      text: 'Click',
      onClick: () => {
        ElMessage('click');
      },
    });
    const button2 = new ElButton({ text: 'Double Click' });
    button2.on(PointerEvent.DOUBLE_CLICK, () => {
      ElMessage('double click');
    });
    const button3 = new ElButton({ text: 'Right Click' });
    button3.on(PointerEvent.MENU, () => {
      ElMessage('right click');
    });

    const flow = new Flow({
      gap: 10,
      children: [button1, button2, button3],
    });

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

Button Props ​

属性名说明类型默认值
text文本string—
size尺寸'large' | 'default' | 'small' | ''—
type类型'primary' | 'success' | 'warning' | 'danger' | 'info' | ''—
plain是否为朴素按钮booleanfalse
link是否为链接按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
loading是否为加载中状态booleanfalse
loadingIcon自定义加载中状态图标组件stringLoading
disabled按钮是否为禁用状态booleanfalse
icon图标组件string—
color自定义按钮颜色string—
children自定义额外内容IUIInputData[]—
onClick点击事件Function—

ButtonGroup Props ​

属性名说明类型默认值
size用于控制该按钮组内按钮的大小'large' | 'default' | 'small' | ''—
type用于控制该按钮组内按钮的类型'primary' | 'success' | 'warning' | 'danger' | 'info' | ''—
children自定义按钮组按钮ButtonInstance[]—