Button 按钮 ​

<template>
  <div class="button-example">
    <div class="button-row">
      <u-button>Default</u-button>
      <u-button type="primary">Primary</u-button>
      <u-button type="success">Success</u-button>
      <u-button type="info">Info</u-button>
      <u-button type="warning">Warning</u-button>
      <u-button type="danger">Danger</u-button>
    </div>

    <div class="button-row">
      <u-button plain>Plain</u-button>
      <u-button type="primary" plain>Primary</u-button>
      <u-button type="success" plain>Success</u-button>
      <u-button type="info" plain>Info</u-button>
      <u-button type="warning" plain>Warning</u-button>
      <u-button type="danger" plain>Danger</u-button>
    </div>

    <div class="button-row">
      <u-button round>Round</u-button>
      <u-button type="primary" round>Primary</u-button>
      <u-button type="success" round>Success</u-button>
      <u-button type="info" round>Info</u-button>
      <u-button type="warning" round>Warning</u-button>
      <u-button type="danger" round>Danger</u-button>
    </div>

    <div class="button-row">
      <u-button dashed>Dashed</u-button>
      <u-button type="primary" dashed>Primary</u-button>
      <u-button type="success" dashed>Success</u-button>
      <u-button type="info" dashed>Info</u-button>
      <u-button type="warning" dashed>Warning</u-button>
      <u-button type="danger" dashed>Danger</u-button>
    </div>

    <div class="button-row">
      <u-button outline>Outline</u-button>
      <u-button type="primary" outline>Primary</u-button>
      <u-button type="success" outline>Success</u-button>
      <u-button type="info" outline>Info</u-button>
      <u-button type="warning" outline>Warning</u-button>
      <u-button type="danger" outline>Danger</u-button>
    </div>

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

    <div class="button-row">
      <u-button :icon="Search" tooltip="搜索" />
      <u-button type="primary" :icon="Edit" tooltip="编辑" />
      <u-button type="primary" :icon="Enable" tooltip="启用" />
      <u-button type="danger" :icon="Disable" tooltip="禁用" />
      <u-button type="danger" :icon="Delete2" tooltip="删除" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Delete2,
  Disable,
  Edit,
  Enable,
  Message,
  Search,
  Star,
} from '@uniboot/icons-vue'
</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">
      <u-button disabled>Default</u-button>
      <u-button type="primary" disabled>Primary</u-button>
      <u-button type="success" disabled>Success</u-button>
      <u-button type="info" disabled>Info</u-button>
      <u-button type="warning" disabled>Warning</u-button>
      <u-button type="danger" disabled>Danger</u-button>
    </div>

    <div class="button-row">
      <u-button plain disabled>Plain</u-button>
      <u-button type="primary" plain disabled>Primary</u-button>
      <u-button type="success" plain disabled>Success</u-button>
      <u-button type="info" plain disabled>Info</u-button>
      <u-button type="warning" plain disabled>Warning</u-button>
      <u-button type="danger" plain disabled>Danger</u-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>Basic link button</p>
  <div class="mb-4">
    <u-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
    >
      {{ button.text }}
    </u-button>
  </div>

  <p>Disabled link button</p>
  <div>
    <u-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
      disabled
    >
      {{ button.text }}
    </u-button>
  </div>
</template>

<script setup lang="ts">
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

<template>
  <p>Basic text button</p>
  <div class="mb-4">
    <u-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
    >
      {{ button.text }}
    </u-button>
  </div>

  <p>Background color always on</p>
  <div class="mb-4">
    <u-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      bg
    >
      {{ button.text }}
    </u-button>
  </div>

  <p>Disabled text button</p>
  <div>
    <u-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      disabled
    >
      {{ button.text }}
    </u-button>
  </div>
</template>

<script setup lang="ts">
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

<template>
  <div>
    <u-button type="primary" :icon="Edit" />
    <u-button type="primary" :icon="Share" />
    <u-button type="primary" :icon="Delete" />
    <u-button type="primary" :icon="Search">Search</u-button>
    <u-button type="primary">
      Upload<u-icon class="u-icon--right"><Upload /></u-icon>
    </u-button>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@uniboot/icons-vue'
</script>

<template>
  <div class="icon-button-example">
    <div class="button-row">
      <u-button :icon="DocumentCopy" tooltip="复制" />
      <u-button :icon="Document" tooltip="日志" />
      <u-button :icon="Link" tooltip="解除关联" type="danger" />
    </div>

    <div class="button-row">
      <u-button :icon="Edit" tooltip="编辑" type="primary" />
      <u-button :icon="Delete" tooltip="删除" type="danger" />
      <u-button :icon="Search" tooltip="搜索" type="info" />
      <u-button :icon="Star" tooltip="收藏" type="warning" />
      <u-button :icon="Check" tooltip="确认" type="success" />
    </div>

    <div class="button-row">
      <u-button :icon="Edit" tooltip="Large" size="large" />
      <u-button :icon="Edit" tooltip="Default" />
      <u-button :icon="Edit" tooltip="Small" size="small" />
      <u-button :icon="Edit" tooltip="Disabled" disabled />
    </div>

    <div class="button-row">
      <u-button :icon="Edit" tooltip="top" tooltip-placement="top" />
      <u-button :icon="Edit" tooltip="right" tooltip-placement="right" />
      <u-button :icon="Edit" tooltip="bottom" tooltip-placement="bottom" />
      <u-button :icon="Edit" tooltip="left" tooltip-placement="left" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Document,
  DocumentCopy,
  Edit,
  Link,
  Search,
  Star,
} from '@uniboot/icons-vue'
</script>

<style scoped>
.icon-button-example {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.button-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>

<template>
  <u-button-group class="mb-4">
    <u-button type="primary" :icon="ArrowLeft">Previous Page</u-button>
    <u-button type="primary">
      Next Page<u-icon class="u-icon--right"><ArrowRight /></u-icon>
    </u-button>
  </u-button-group>
  <br />
  <u-radio-group v-model="direction" class="mb-2">
    <u-radio value="horizontal">Horizontal</u-radio>
    <u-radio value="vertical">Vertical</u-radio>
  </u-radio-group>
  <br />

  <u-button-group :direction="direction">
    <u-button type="primary" :icon="House" />
    <u-button type="primary" :icon="Operation" />
    <u-button type="primary" :icon="Notification" />
  </u-button-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ArrowLeft,
  ArrowRight,
  House,
  Notification,
  Operation,
} from '@uniboot/icons-vue'

const direction = ref<'horizontal' | 'vertical'>('horizontal')
</script>

<template>
  <u-button type="primary" loading>Loading</u-button>
  <u-button type="primary" :loading-icon="Eleme" loading>Loading</u-button>
  <u-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
          "
            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
          />
        </svg>
      </div>
    </template>
    Loading
  </u-button>
</template>

<script lang="ts" setup>
import { Eleme } from '@uniboot/icons-vue'
</script>

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

<template>
  <div class="flex flex-wrap items-center mb-4">
    <u-button size="large">Large</u-button>
    <u-button>Default</u-button>
    <u-button size="small">Small</u-button>
    <u-button size="large" :icon="Search">Search</u-button>
    <u-button :icon="Search">Search</u-button>
    <u-button size="small" :icon="Search">Search</u-button>
  </div>
  <div class="flex flex-wrap items-center mb-4">
    <u-button size="large" round>Large</u-button>
    <u-button round>Default</u-button>
    <u-button size="small" round>Small</u-button>
    <u-button size="large" :icon="Search" round>Search</u-button>
    <u-button :icon="Search" round>Search</u-button>
    <u-button size="small" :icon="Search" round>Search</u-button>
  </div>
  <div class="flex flex-wrap items-center">
    <u-button :icon="Search" size="large" circle />
    <u-button :icon="Search" circle />
    <u-button :icon="Search" size="small" circle />
  </div>
</template>

<script setup lang="ts">
import { Search } from '@uniboot/icons-vue'
</script>

<template>
  <u-button>button</u-button>
  <u-button tag="div" role="button" tabindex="0">div</u-button>
  <u-button
    type="primary"
    tag="a"
    href="https://gitlab.in.whatspos.cn/cq/dev/fe/uniboot-ui"
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </u-button>
</template>

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

<template>
  <div>
    <u-button color="#626aef" :dark="isDark">Default</u-button>
    <u-button color="#626aef" :dark="isDark" plain>Plain</u-button>
    <u-button color="#626aef" :dark="isDark" link>Link</u-button>
    <u-button color="#626aef" :dark="isDark" text>Text</u-button>
    <u-button color="#626aef" :dark="isDark" text bg>Text BG</u-button>

    <u-button color="#626aef" :dark="isDark" disabled>Disabled</u-button>
    <u-button color="#626aef" :dark="isDark" disabled plain>
      Disabled Plain
    </u-button>
    <u-button color="#626aef" :dark="isDark" disabled link>
      Disabled Link
    </u-button>
    <u-button color="#626aef" :dark="isDark" disabled text>
      Disabled Text
    </u-button>
    <u-button color="#626aef" :dark="isDark" disabled text bg>
      Disabled Text BG
    </u-button>
  </div>
</template>