Button 按钮

基本用法

<template>
  <div class="button-group">
    <LbButton>Default Button</LbButton>
    <LbButton type="primary">Primary Button</LbButton>
    <LbButton type="success">Success Button</LbButton>
    <LbButton type="warning">Warning Button</LbButton>
    <LbButton type="danger">Danger Button</LbButton>
    <LbButton type="info">Info Button</LbButton>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.button-group {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>

属性

属性名	类型	默认值	说明
type	'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'	'default'	按钮类型
size	'medium' | 'small' | 'large'	'medium'	按钮大小
disabled	boolean	false	是否禁用
round	boolean	false	是否圆角
circle	boolean	false	是否圆形
loading	boolean	false	是否加载中
plain	boolean	false	是否朴素按钮
text	boolean	false	是否文字按钮
link	boolean	false	是否链接按钮

示例

不同类型

<template>
  <div style="display: flex; gap: 10px;">
    <LbButton type="primary">Primary</LbButton>
    <LbButton type="success">Success</LbButton>
    <LbButton type="warning">Warning</LbButton>
    <LbButton type="danger">Danger</LbButton>
    <LbButton type="info">Info</LbButton>
    <LbButton type="default">Default</LbButton>
  </div>
</template>

不同大小

<template>
  <div style="display: flex; gap: 10px; align-items: center;">
    <LbButton size="small">Small</LbButton>
    <LbButton size="medium">Medium</LbButton>
    <LbButton size="large">Large</LbButton>
  </div>
</template>

<script setup lang="ts"></script>

禁用状态

<template>
  <div style="display: flex; gap: 10px;">
    <LbButton disabled>Disabled Button</LbButton>
    <LbButton type="primary" disabled>Disabled Primary</LbButton>
  </div>
</template>

图标按钮

<template>
  <div class="button-group">
    <LbButton circle
      ><LbIcon><CheckmarkCircle /></LbIcon
    ></LbButton>
    <LbButton type="primary" circle
      ><LbIcon><CheckmarkCircle /></LbIcon
    ></LbButton>
    <LbButton type="success" circle
      ><LbIcon><CheckmarkCircle /></LbIcon
    ></LbButton>
    <LbButton type="warning" circle
      ><LbIcon><CheckmarkCircle /></LbIcon
    ></LbButton>
    <LbButton type="danger" circle
      ><LbIcon><CheckmarkCircle /></LbIcon
    ></LbButton>
    <LbButton type="info" circle
      ><LbIcon><CheckmarkCircle /></LbIcon
    ></LbButton>
  </div>
  <div class="button-group">
    <LbButton
      ><LbIcon><CheckmarkCircle /></LbIcon>Default</LbButton
    >
    <LbButton type="primary"
      ><LbIcon><CheckmarkCircle /></LbIcon>Priamry</LbButton
    >
    <LbButton type="success"
      ><LbIcon><CheckmarkCircle /></LbIcon>Success</LbButton
    >
    <LbButton type="warning"
      ><LbIcon><CheckmarkCircle /></LbIcon>Warning</LbButton
    >
    <LbButton type="danger"
      ><LbIcon><CheckmarkCircle /></LbIcon>Danger</LbButton
    >
    <LbButton type="info"
      ><LbIcon><CheckmarkCircle /></LbIcon>Info</LbButton
    >
  </div>
</template>

<script setup lang="ts">
import { Search, PencilSharp, CheckmarkCircle, Trash, InformationCircle } from '@vicons/ionicons5';
</script>

<style scoped>
.button-group {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>

圆角和圆形按钮

<template>
  <div class="button-group">
    <LbButton round>Round Button</LbButton>
    <LbButton type="primary" round>Primary Round</LbButton>
    <LbButton type="success" round>Success Round</LbButton>
    <LbButton type="warning" round>Warning Round</LbButton>
    <LbButton type="danger" round>Danger Round</LbButton>
    <LbButton type="info" round>Info Round</LbButton>
  </div>
</template>

<script setup lang="ts">
import { CheckmarkCircle, Trash } from '@vicons/ionicons5';
</script>

<style scoped>
  .button-group {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
</style>

加载状态

<template>
  <div style="display: flex; gap: 10px;">
    <LbButton loading>加载中</LbButton>
    <LbButton type="primary" loading>加载中</LbButton>
  </div>
</template>

朴素按钮

<template>
  <div class="button-group">
    <LbButton plain>Plain Button</LbButton>
    <LbButton type="primary" plain>Primary Plain</LbButton>
    <LbButton type="success" plain>Success Plain</LbButton>
    <LbButton type="warning" plain>Warning Plain</LbButton>
    <LbButton type="danger" plain>Danger Plain</LbButton>
    <LbButton type="info" plain>Info Plain</LbButton>
  </div>
</template>

<style scoped>
  .button-group {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
</style>

文字按钮

<template>
  <div style="display: flex; gap: 10px;">
    <LbButton text>文字按钮</LbButton>
    <LbButton type="primary" text>Primary Text</LbButton>
    <LbButton type="success" text>Success Text</LbButton>
  </div>
</template>

链接按钮

<template>
  <div style="display: flex; gap: 10px;">
    <LbButton link>链接按钮</LbButton>
    <LbButton type="primary" link>Primary Link</LbButton>
    <LbButton type="success" link>Success Link</LbButton>
  </div>
</template>