Иконка батырмасы

Ықшам әрекеттерге арналған тек иконкадан тұратын батырманы көрсетеді.

Орнату

npx alixan-ui-nuxt add icon-button

Қолдану

IconButton Button сияқты variant және color жүйесін қолданады, бірақ тек иконкаға арналған әрекеттер үшін квадрат пішінді сақтайды.

Толтырылған

Контурлы

Мөлдір

<script setup lang="ts">
import { ArrowUpRight } from '@lucide/vue'
import IconButton from '@/components/ui/icon-button/IconButton.vue'
</script>

<template>
  <div class="space-y-4">
    <div class="flex flex-wrap items-center gap-2">
      <IconButton variant="filled" color="default">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="filled" color="primary">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="filled" color="secondary">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="filled" color="destructive">
        <ArrowUpRight />
      </IconButton>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <IconButton variant="outlined" color="default">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="outlined" color="primary">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="outlined" color="secondary">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="outlined" color="destructive">
        <ArrowUpRight />
      </IconButton>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <IconButton variant="ghost" color="default">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="ghost" color="primary">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="ghost" color="secondary">
        <ArrowUpRight />
      </IconButton>
      <IconButton variant="ghost" color="destructive">
        <ArrowUpRight />
      </IconButton>
    </div>
  </div>
</template>

Өлшем

<script setup lang="ts">
import { ArrowUpRight } from '@lucide/vue'
import IconButton from '@/components/ui/icon-button/IconButton.vue'
</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton size="sm">
      <ArrowUpRight />
    </IconButton>
    <IconButton>
      <ArrowUpRight />
    </IconButton>
    <IconButton size="lg">
      <ArrowUpRight />
    </IconButton>
  </div>
</template>

<script setup lang="ts">
import { ArrowUpRight } from '@lucide/vue'
import IconButton from '@/components/ui/icon-button/IconButton.vue'

</script>

<template>
  <div class="flex items-center gap-2">
    <IconButton :to="$localePath('/icon-button')">
      <ArrowUpRight />
    </IconButton>

    <IconButton
      href="https://github.com"
      target="_blank"
      variant="outlined"
    >
      <ArrowUpRight />
    </IconButton>
  </div>
</template>

Жүктелу

IconButton ішінде inline spinner жоқ. Inline loading пайдаланушыға беттен кетуге мүмкіндік беріп, әрекет контекстін жоғалтуы мүмкін. Операция бір blocking action ретінде қабылдануы керек болса, global loader қолданыңыз.

<script setup lang="ts">
import { ArrowUpRight } from '@lucide/vue'

const loader = useGlobalLoader()

const save = () => {
  loader.show({ label: 'Saving action...' })

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

<template>
  <IconButton @click="save">
    <ArrowUpRight />
  </IconButton>
</template>

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

Иконка әрекетін үнсіз қолжетімсіз етпеңіз. Оны белсенді қалдырып, пайдаланушы не істеуі керегін түсіндіретін warning dialog көрсетіңіз.

<script setup lang="ts">
import { ArrowUpRight } from '@lucide/vue'

const dialog = useDialog()

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

<template>
  <IconButton variant="outlined" @click="openAlert">
    <ArrowUpRight />
  </IconButton>
</template>

API анықтамасы