按钮 ​

<template>
  <div class="button-example">
    <div class="button-row">
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要操作</el-button>
      <el-button type="success">提交成功</el-button>
      <el-button type="info">补充信息</el-button>
      <el-button type="warning">提醒用户</el-button>
      <el-button type="danger">删除内容</el-button>
    </div>

    <div class="button-row">
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要操作</el-button>
      <el-button type="success" plain>提交成功</el-button>
      <el-button type="info" plain>补充信息</el-button>
      <el-button type="warning" plain>提醒用户</el-button>
      <el-button type="danger" plain>删除内容</el-button>
    </div>

    <div class="button-row">
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要操作</el-button>
      <el-button type="success" round>提交成功</el-button>
      <el-button type="info" round>补充信息</el-button>
      <el-button type="warning" round>提醒用户</el-button>
      <el-button type="danger" round>删除内容</el-button>
    </div>

    <div class="button-row">
      <el-button dashed>虚线按钮</el-button>
      <el-button type="primary" dashed>主要操作</el-button>
      <el-button type="success" dashed>提交成功</el-button>
      <el-button type="info" dashed>补充信息</el-button>
      <el-button type="warning" dashed>提醒用户</el-button>
      <el-button type="danger" dashed>删除内容</el-button>
    </div>

    <div class="button-row">
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Check from '~icons/ep/check'
import Delete from '~icons/ep/delete'
import Edit from '~icons/ep/edit'
import Message from '~icons/ep/message'
import Search from '~icons/ep/search'
import Star from '~icons/ep/star'
</script>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

<template>
  <div class="button-example">
    <div class="button-row">
      <el-button disabled>默认按钮</el-button>
      <el-button type="primary" disabled>主要操作</el-button>
      <el-button type="success" disabled>提交成功</el-button>
      <el-button type="info" disabled>补充信息</el-button>
      <el-button type="warning" disabled>提醒用户</el-button>
      <el-button type="danger" disabled>删除内容</el-button>
    </div>

    <div class="button-row">
      <el-button plain disabled>朴素按钮</el-button>
      <el-button type="primary" plain disabled>主要操作</el-button>
      <el-button type="success" plain disabled>提交成功</el-button>
      <el-button type="info" plain disabled>补充信息</el-button>
      <el-button type="warning" plain disabled>提醒用户</el-button>
      <el-button type="danger" plain disabled>删除内容</el-button>
    </div>
  </div>
</template>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

<template>
  <p>基础链接按钮</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>禁用链接按钮</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
const buttons = [
  { type: '', text: '默认' },
  { type: 'primary', text: '主要' },
  { type: 'success', text: '成功' },
  { type: 'info', text: '信息' },
  { type: 'warning', text: '提醒' },
  { type: 'danger', text: '删除' },
] as const
</script>

<template>
  <p>基础文字按钮</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>背景常显</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      bg
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>禁用文字按钮</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
const buttons = [
  { type: '', text: '默认' },
  { type: 'primary', text: '主要' },
  { type: 'success', text: '成功' },
  { type: 'info', text: '信息' },
  { type: 'warning', text: '提醒' },
  { type: 'danger', text: '删除' },
] as const
</script>

<template>
  <div class="button-row">
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">搜索</el-button>
    <el-button type="primary">
      上传资料<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>

<script setup lang="ts">
import Delete from '~icons/ep/delete'
import Edit from '~icons/ep/edit'
import Search from '~icons/ep/search'
import Share from '~icons/ep/share'
import Upload from '~icons/ep/upload'
</script>

<style scoped>
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
</style>

<template>
  <div class="group-example">
    <el-text size="small">默认纵向，适合操作列表。</el-text>
    <el-button-group>
      <el-button type="primary" :icon="House">进入首页</el-button>
      <el-button type="primary" :icon="Operation">筛选条件</el-button>
      <el-button type="primary" :icon="Notification">消息提醒</el-button>
    </el-button-group>

    <el-text size="small">如果是底部双按钮栏，可显式设置为横向。</el-text>
    <el-button-group direction="horizontal">
      <el-button :icon="ArrowLeft">稍后处理</el-button>
      <el-button type="primary">
        立即提交<el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </el-button-group>
  </div>
</template>

<script setup lang="ts">
import ArrowLeft from '~icons/ep/arrow-left'
import ArrowRight from '~icons/ep/arrow-right'
import House from '~icons/ep/house'
import Notification from '~icons/ep/notification'
import Operation from '~icons/ep/operation'
</script>

<style scoped>
.group-example {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
</style>

<template>
  <el-button type="primary" loading>加载中</el-button>
  <el-button type="primary" :loading-icon="Eleme" loading>提交中</el-button>
  <el-button type="primary" loading>
    <template #loading>
      <div class="custom-loading">
        <svg class="circular" viewBox="-10, -10, 50, 50">
          <path
            class="path"
            d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
          />
        </svg>
      </div>
    </template>
    同步数据
  </el-button>
</template>

<script lang="ts" setup>
import Eleme from '~icons/ep/eleme'
</script>

<style scoped>
.el-button .custom-loading .circular {
  margin-right: 0.375rem;
  width: 1.125rem;
  height: 1.125rem;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 0.125rem;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
  fill: transparent;
}
</style>

<template>
  <div class="flex flex-wrap items-center mb-4">
    <el-button size="large">大号</el-button>
    <el-button>默认</el-button>
    <el-button size="small">小号</el-button>
    <el-button size="large" :icon="Search">搜索</el-button>
    <el-button :icon="Search">搜索</el-button>
    <el-button size="small" :icon="Search">搜索</el-button>
  </div>
  <div class="flex flex-wrap items-center mb-4">
    <el-button size="large" round>大号</el-button>
    <el-button round>默认</el-button>
    <el-button size="small" round>小号</el-button>
    <el-button size="large" :icon="Search" round>搜索</el-button>
    <el-button :icon="Search" round>搜索</el-button>
    <el-button size="small" :icon="Search" round>搜索</el-button>
  </div>
  <div class="flex flex-wrap items-center">
    <el-button :icon="Search" size="large" circle />
    <el-button :icon="Search" circle />
    <el-button :icon="Search" size="small" circle />
  </div>
</template>

<script setup lang="ts">
import Search from '~icons/ep/search'
</script>

<template>
  <el-button>原生按钮</el-button>
  <el-button tag="div" role="button" tabindex="0">容器按钮</el-button>
  <el-button
    type="primary"
    tag="a"
    href="https://github.com/element-plus/element-plus"
    target="_blank"
    rel="noopener noreferrer"
  >
    外部链接
  </el-button>
</template>

<script lang="ts" setup>
import { isDark } from '~/composables/dark'

const brandColor = 'var(--el-color-primary)'
</script>

<template>
  <div>
    <el-button :color="brandColor" :dark="isDark">品牌按钮</el-button>
    <el-button :color="brandColor" :dark="isDark" plain>品牌朴素</el-button>

    <el-button :color="brandColor" :dark="isDark" disabled>禁用状态</el-button>
    <el-button :color="brandColor" :dark="isDark" disabled plain>
      禁用朴素
    </el-button>
  </div>
</template>