Alixan UI

Батырма

Формалардағы, тулбарлардағы және навигациядағы әрекеттерге арналған батырманы көрсетеді.

Орнату

npx alixan-ui-nuxt add button

Қолдану

Button стилі екі тәуелсіз prop арқылы құрылады: variant визуалды салмақты, ал color әрекет intent мәнін таңдайды. Әрекет мағынасын өзгертпей, дұрыс акцент алу үшін оларды бірге қолданыңыз.

Толтырылған

Контурлы

Мөлдір

<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="space-y-4">
    <div class="flex flex-wrap items-center gap-2">
      <Button variant="filled" color="default">Default</Button>
      <Button variant="filled" color="primary">Primary</Button>
      <Button variant="filled" color="secondary">Secondary</Button>
      <Button variant="filled" color="destructive">Destructive</Button>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <Button variant="outlined" color="default">Default</Button>
      <Button variant="outlined" color="primary">Primary</Button>
      <Button variant="outlined" color="secondary">Secondary</Button>
      <Button variant="outlined" color="destructive">Destructive</Button>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <Button variant="ghost" color="default">Default</Button>
      <Button variant="ghost" color="primary">Primary</Button>
      <Button variant="ghost" color="secondary">Secondary</Button>
      <Button variant="ghost" color="destructive">Destructive</Button>
    </div>
  </div>
</template>

Өлшем

<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="flex items-center gap-2">
    <Button size="sm">
      Small
    </Button>
    <Button>
      Default
    </Button>
    <Button size="lg">
      Large
    </Button>
  </div>
</template>

Иконкамен

<script setup lang="ts">
import { ArrowRight, GitBranch } from '@lucide/vue'
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <div class="flex items-center gap-2">
    <Button variant="outlined">
      <template #leading>
        <GitBranch class="size-5" />
      </template>
      New Branch
    </Button>

    <Button variant="outlined">
      Continue
      <template #trailing>
        <ArrowRight class="size-5" />
      </template>
    </Button>
  </div>
</template>

Жүктелу

Button ішінде дайын spinner күйі жоқ. Батырма inline айналып тұрса, пайдаланушы беттен кетіп, әрекет контекстін жоғалтуы мүмкін. Global loader бетті блоктап, бір белсенді операцияны көрсетеді және тәжірибені түсініктірек етеді.

<script setup lang="ts">
const loader = useGlobalLoader()

const save = () => {
  loader.show({ label: 'componentDocs.button.savingChanges' })

  window.setTimeout(() => {
    loader.hide()
  }, 3000)
}
</script>

<template>
  <Button @click="save">Save changes</Button>
</template>

Өшірілген күй

Батырмаларды өшірмеген дұрыс. Әрекетті көрінетін және белсенді қалдырып, неге орындалмайтынын warning хабарламасы арқылы түсіндіріңіз. Осылай пайдаланушы өлі control орнына feedback алады.

<script setup lang="ts">
const dialog = useDialog()

const openAlert = () => {
  dialog.open(AlertDialog, {
    width: '360px',
    height: '280px',
    data: {
      title: 'componentDocs.button.actionUnavailable',
      description: 'componentDocs.button.exportUnavailable',
      buttonLabel: 'componentDocs.button.gotIt',
    },
  })
}
</script>

<template>
  <Button variant="outlined" @click="openAlert">
    Export report
  </Button>
</template>

API анықтамасы

ҚасиетТүріӘдепкіСипаттама
labelstring-Default slot қолданылмаса көрсетілетін қосалқы мәтін.
variant'filled' | 'outlined' | 'ghost''filled'Беткі стиль. Filled әдепкі бойынша қолданылады. Intent үшін color-мен бірге қолданыңыз.
color'default' | 'primary' | 'secondary' | 'destructive''default'Семантикалық intent. Әр variant-пен жұмыс істейді.
size'sm' | 'md' | 'lg''md'Биіктікті, padding және мәтін өлшемін басқарады.
toRouteLocationRaw-Мән берілсе, батырманы NuxtLink ретінде көрсетеді.
hrefstring-Мән берілсе, батырманы нативті сілтеме ретінде көрсетеді.
target'_blank' | '_self' | '_parent' | '_top'-Сілтеме target. href сілтемелерімен жұмыс істейді.
tooltipstring-Tooltip контенті. Мәндер translation key болуы мүмкін.