BÜCHL Komponensek

A BÜCHL Design System komponens könyvtára - Nuxt UI Pro alapokon

Gombok

BÜCHL Márka gombok

      <!-- Fehér gomb szürke kerettel -->
<UButton 
  label="Jetzt kontaktieren"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="neutral"
  class="rounded-none bg-white text-buchl-blue border border-gray-300 hover:bg-gray-50"
/>

<!-- Szürke gomb -->
<UButton 
  label="Jetzt kontaktieren"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="neutral"
  class="rounded-none bg-gray-50 text-buchl-blue border border-gray-300 hover:bg-gray-100"
/>

<!-- BÚCHL kék gomb -->
<UButton 
  label="Stellenangebote"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="primary"
  class="rounded-none"
/>

<!-- Világosabb BÚCHL kék gomb -->
<UButton 
  label="Stellenangebote"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="primary"
  variant="subtle"
  class="rounded-none"
/>

<!-- BÚCHL zöld gomb -->
<UButton 
  label="Nachhaltigkeit"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="secondary"
  class="rounded-none text-buchl-blue"
/>

<!-- BÚCHL zöld outline gomb -->
<UButton 
  label="Nachhaltigkeit"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="buchl"
  variant="outline"
  class="rounded-none border-2 border-buchl-500"
/>

Alap gombok

      <UButton 
  label="Elsődleges"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="Semleges"
  color="neutral"
  variant="outline"
  class="rounded-none border"
/>

<UButton 
  label="Sikeres"
  color="success"
  class="rounded-none"
/>

<UButton 
  label="Figyelmeztetés"
  color="warning"
  class="rounded-none"
/>

<UButton 
  label="Hiba"
  color="error"
  class="rounded-none"
/>

Gomb variánsok

      <UButton 
  label="Solid"
  color="primary"
  variant="solid"
  class="rounded-none"
/>

<UButton 
  label="Outline"
  color="primary"
  variant="outline"
  class="rounded-none border-2 border-buchl-blue"
/>

<UButton 
  label="Subtle"
  color="primary"
  variant="subtle"
  class="rounded-none"
/>

<UButton 
  label="Ghost"
  color="primary"
  variant="ghost"
  class="rounded-none"
/>

<UButton 
  label="Link"
  color="primary"
  variant="link"
  class="rounded-none"
/>

Gomb méretek

      <UButton 
  label="XS"
  size="xs"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="SM"
  size="sm"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="MD"
  size="md"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="LG"
  size="lg"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="XL"
  size="xl"
  color="primary"
  class="rounded-none"
/>

Gomb állapotok

      <UButton 
  label="Normál"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="Betöltés..."
  :loading="true"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="Letiltott"
  :disabled="true"
  color="neutral"
  class="rounded-none"
/>

Ikonos gombok

      <UButton 
  label="Email küldése"
  icon="i-lucide-mail"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="Hozzáadás"
  icon="i-heroicons-plus"
  color="primary"
  class="rounded-none"
/>

<UButton 
  label="Tovább"
  icon="i-heroicons-arrow-right"
  :trailing="true"
  color="primary"
  class="rounded-none"
/>

<UButton 
  icon="i-heroicons-cog"
  color="primary"
  class="rounded-none p-3"
/>

Űrlap elemek

Beviteli mezők

      <UInput v-model="text" placeholder="Alapértelmezett beviteli mező" color="primary" variant="outline" class="w-full" />
<UInput v-model="email" type="email" placeholder="Email cím" icon="i-lucide-mail" color="primary" variant="outline" class="w-full" />
<UInput v-model="password" type="password" placeholder="Jelszó" icon="i-lucide-lock" color="primary" variant="outline" class="w-full" />
<UInput v-model="search" placeholder="Keresés..." icon="i-lucide-search" :loading="loading" color="primary" variant="outline" class="w-full" />
<UInput v-model="text" placeholder="Hibás mező" color="error" variant="outline" :highlight="true" class="w-full" />
<UInput v-model="email" type="email" placeholder="Email cím" :disabled="true" color="primary" variant="outline" class="w-full" />

Szövegterület

      <UTextarea v-model="message" placeholder="Írja ide az üzenetét..." :rows="4" color="primary" variant="outline" class="w-full" />
<UTextarea v-model="bio" placeholder="Rövid bemutatkozás" :rows="3" :disabled="true" color="primary" variant="outline" class="w-full" />

Legördülő menük

      <USelect 
  v-model="selectedCity" 
  :items="cities" 
  placeholder="Válasszon várost"
  color="primary"
  variant="outline"
  class="w-full"
/>

<USelect 
  v-model="selectedStatus" 
  :items="statusOptions"
  value-key="value"
  option-attribute="label"
  placeholder="Válasszon státuszt"
  color="primary"
  variant="outline"
  class="w-full"
/>

Form csoportok

Minimum 8 karakter hosszú
      <UFormField label="Név" name="name" required>
  <UInput v-model="name" placeholder="Teljes név" color="primary" variant="outline" class="w-full" />
</UFormField>

<UFormField 
  label="Jelszó" 
  name="password" 
  required
  :error="passwordError"
  help="Minimum 8 karakter hosszú"
>
  <UInput v-model="password" type="password" placeholder="Biztonságos jelszó" color="primary" variant="outline" class="w-full" />
</UFormField>

Jelölőnégyzetek és kapcsolók

Jelölőnégyzetek

Kapcsolók

      <UCheckbox v-model="terms" label="Elfogadom a felhasználási feltételeket" color="primary" />
<UCheckbox v-model="newsletter" label="Feliratkozom a hírlevélre" color="primary" />
<USwitch v-model="notifications" label="Értesítések engedélyezése" color="primary" />

Rádiógombok

      <URadioGroup 
  v-model="delivery" 
  :items="deliveryOptions"
  value-key="value"
  option-attribute="label"
  color="primary"
/>

Kártyák

Alap Kártya Komponensek

A részletes kártya dokumentációért és további példákért látogass el a Kártyák oldalra .

Egyszerű Kártya

Ez egy alapvető kártya header, body és footer slot-okkal.

Ikonos Kártya

Kártya ikonnal és testreszabott fejléccel.

Projektek

124

      <!-- Egyszerű Kártya -->
<UCard>
  <template #header>
    <h4 class="text-lg font-semibold">Egyszerű Kártya</h4>
  </template>
  <p class="text-gray-600 dark:text-gray-400">
    Ez egy alapvető kártya header, body és footer slot-okkal.
  </p>
  <template #footer>
    <UButton label="Művelet" color="primary" size="sm" class="rounded-none" />
  </template>
</UCard>

<!-- Ikonos Kártya -->
<UCard>
  <template #header>
    <div class="flex items-center gap-3">
      <div class="p-2 bg-primary-100 dark:bg-primary-900 rounded-lg">
        <UIcon name="i-heroicons-rocket-launch" class="text-primary-600 dark:text-primary-400 text-xl" />
      </div>
      <h4 class="text-lg font-semibold">Ikonos Kártya</h4>
    </div>
  </template>
  <p class="text-gray-600 dark:text-gray-400">
    Kártya ikonnal és testreszabott fejléccel.
  </p>
</UCard>

<!-- Statisztikai Kártya -->
<UCard>
  <div class="flex items-center justify-between">
    <div>
      <p class="text-sm text-gray-600 dark:text-gray-400">Projektek</p>
      <p class="text-2xl font-bold text-primary-600">124</p>
    </div>
    <UIcon name="i-heroicons-briefcase" class="text-primary-400 text-2xl" />
  </div>
</UCard>

Értesítések

Alert komponensek

Információs üzenet
Ez egy általános információs értesítés.
Sikeres művelet
A művelet sikeresen végrehajtva.
Figyelmeztetés
Kérjük, ellenőrizze a megadott adatokat.
Hiba történt
A művelet végrehajtása során hiba lépett fel.
      <UAlert
  title="Információs üzenet"
  description="Ez egy általános információs értesítés."
  icon="i-heroicons-information-circle"
/>

<UAlert
  title="Sikeres művelet"
  description="A művelet sikeresen végrehajtva."
  color="success"
  icon="i-heroicons-check-circle"
/>

Címkék

Badge komponensek

ElsődlegesSemlegesÚjKiemeltSürgősKeretezettLágy
      <UBadge color="primary" label="Elsődleges" />
<UBadge color="neutral" label="Semleges" />
<UBadge color="success" label="Új" />
<UBadge variant="outline" label="Keretezett" />
<UBadge variant="subtle" label="Lágy" />