button-group
Vertical button group orientation
Vertical button group orientation
Загрузка превью…
src/button-group/c-button-group-13.vue
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
</script>
<template>
<ButtonGroup orientation="vertical">
<Button variant="outline" size="icon" aria-label="Add">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-plus"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</Button>
<Button variant="outline" size="icon" aria-label="Subtract">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-minus"
>
<path d="M5 12h14" />
</svg>
</Button>
</ButtonGroup>
</template>
Установка
npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-button-group-13.jsonЗависимости реестра
Источник: порт из ReUI (Keenthemes, MIT)