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)