input-group
Input group with multiple icons/buttons at the end
Input group with multiple icons/buttons at the end
Загрузка превью…
src/input-group/c-input-group-21.vue
<!--
Расхождение с апстримом: (1) `IconPlaceholder` заменена инлайновым `<svg>`
(lucide-react v0.545.0 "star"/"copy") — см. docs/PORTING.md §5.
(2) Оригинал вызывает `toast.success(...)` из `sonner` по клику — пакет
не входит в зависимости воркспейса, на статичный скриншот не влияет,
`onClick` не перенесён (см. c-input-group-11).
-->
<script setup lang="ts">
import { Field } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"
</script>
<template>
<Field class="max-w-xs">
<InputGroup>
<InputGroupInput placeholder="Component name..." />
<InputGroupAddon align="inline-end">
<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"
class="lucide lucide-star text-muted-foreground size-4"
>
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
</svg>
<InputGroupButton size="icon-xs" variant="ghost">
<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"
class="lucide lucide-copy size-4"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
</svg>
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</Field>
</template>
Установка
npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-input-group-21.jsonЗависимости реестра
Источник: порт из ReUI (Keenthemes, MIT)