按钮 Button ​

<script setup lang="ts">
  import GeistDesign from 'geist-design'
  import { GIconSun, GIconMoon } from '@whouu/geist-design-icons'

  defineOptions({ name: 'ex-button-basic' })

  const dark = () => {
    GeistDesign.theme.enableDark()
  }

  const light = () => {
    GeistDesign.theme.enableLight()
  }
</script>

<template>
  <div class="buttons">
    <g-button @click="light" :icon="GIconSun">light</g-button>

    <g-button @click="dark" type="primary" :icon="GIconMoon">dark</g-button>
  </div>
</template>

<style lang="scss" scoped>
  .buttons > button {
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>

<script setup lang="ts">
  defineOptions({ name: 'ex-button-type' })
</script>

<template>
  <div class="buttons">
    <g-button disabled>Disabled</g-button>
    <g-button shadow>Shadow</g-button>
    <g-button shadow type="success">Shadow with Type</g-button>
    <g-button circular>Circular</g-button>
  </div>
</template>

<style lang="scss" scoped>
  .buttons > button {
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>

<script setup lang="ts">
  defineOptions({ name: 'ex-button-loading' })
</script>

<template>
  <g-button loading>Loading</g-button>
</template>

<script setup lang="ts">
  defineOptions({ name: 'ex-button-status' })
</script>

<template>
  <div class="buttons">
    <g-button>Basic</g-button>
    <g-button type="primary">Primary</g-button>
    <g-button type="success">Success</g-button>
    <g-button type="warning">Warning</g-button>
    <g-button type="danger">Danger</g-button>
    <g-button type="abort">Abort</g-button>
  </div>
</template>

<style lang="scss" scoped>
  .buttons > button {
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>

<script setup lang="ts">
  defineOptions({ name: 'ex-button-ghost' })
</script>

<template>
  <div class="buttons">
    <g-button ghost>Basic</g-button>
    <g-button ghost type="primary">Primary</g-button>
    <g-button ghost type="success">Success</g-button>
    <g-button ghost type="warning">Warning</g-button>
    <g-button ghost type="danger">Danger</g-button>
    <g-button ghost type="abort">Abort</g-button>
  </div>
</template>

<style lang="scss" scoped>
  .buttons > button {
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>

<script setup lang="ts">
  import { GIconMonitor, GIconGithub, GIconDatabase } from '@whouu/geist-design-icons'

  defineOptions({ name: 'ex-button-icon' })
</script>

<template>
  <div class="buttons">
    <g-button size="small" :icon="GIconMonitor">Monitor</g-button>
    <g-button :iconRight="GIconGithub">Github</g-button>
    <g-button size="big" :iconRight="GIconDatabase">Database</g-button>
    <g-button size="huge" :icon="GIconGithub" :iconRight="GIconGithub">Huge Github</g-button>
  </div>
</template>

<style lang="scss" scoped>
  .buttons > button {
    display: block;
    margin-bottom: 8px;
  }
</style>

<script setup lang="ts">
  import { defineAsyncComponent } from 'vue'

  defineOptions({ name: 'ex-button-custom-icon' })

  // svg 由 vite-svg-loader 加载
  const GeistDesign = defineAsyncComponent(() => import('../../assets/icon.svg'))
</script>

<template>
  <g-button :icon="GeistDesign">Custom Icon</g-button>
</template>

<script setup lang="ts">
  defineOptions({ name: 'ex-button-size' })
</script>

<template>
  <div class="buttons">
    <g-button size="mini">Mini</g-button>
    <g-button size="small">Small</g-button>
    <g-button>Default</g-button>
    <g-button size="big">Big</g-button>
    <g-button size="small" auto>auto width</g-button>
  </div>
</template>

<style lang="scss" scoped>
  .buttons > button {
    display: block;
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>