Customized Komponenten

Tailwind-Varianten

Nuxt UI-Komponenten werden mit der Tailwind Variants API gestylt, die eine leistungsstarke Möglichkeit zum Erstellen von Varianten und Verwalten von Komponentenstilen bietet.

Slots (englisch)

Komponenten können mehrere slots haben, die jeweils ein bestimmtes HTML-Element oder einen Abschnitt innerhalb der Komponente darstellen. Diese Slots ermöglichen flexibles Einfügen und Styling von Inhalten.

Nehmen wir als Beispiel die Komponente Card, die mehrere Steckplätze hat:

export default {
  slots: {
    root: 'rounded-lg overflow-hidden',
    header: 'p-4 sm:px-6',
    title: 'text-highlighted font-semibold',
    description: 'mt-1 text-muted text-sm',
    body: 'p-4 sm:p-6',
    footer: 'p-4 sm:px-6'
  }
}

<template>
  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div data-slot="header" :class="ui.header({ class: props.ui?.header })">
      <slot name="header" />
    </div>

    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
      <slot />
    </div>

    <div data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
      <slot name="footer" />
    </div>
  </Primitive>
</template>

In diesem Fall definiert das Theme nur den base-Slot wie die Container-Komponente zum Beispiel:

export default {
  base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
}

<template>
  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
    <slot />
  </Primitive>
</template>

Variants Bearbeiten

Komponenten unterstützen variants, die die Stile verschiedener slots basierend auf Komponenten-Requisiten dynamisch anpassen.

Zum Beispiel verwendet die Komponente Avatar eine size-Variante, um ihr Aussehen zu steuern:

export default {
  slots: {
    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated',
    image: 'h-full w-full rounded-[inherit] object-cover'
  },
  variants: {
    size: {
      sm: {
        root: 'size-7 text-sm'
      },
      md: {
        root: 'size-8 text-base'
      },
      lg: {
        root: 'size-9 text-lg'
      }
    }
  },
  defaultVariants: {
    size: 'md'
  }
}

Auf diese Weise wendet die size-Prop die entsprechenden Stile auf den root-Steckplatz an:

size

lg

<template>
  <UAvatar src="https://github.com/nuxt.png" size="lg" />
</template>

Default-Varianten

Die defaultVariants-Eigenschaft legt den Standardwert für jede Variante fest, wenn keine Prop übergeben wird.

Die Standardgröße der Komponente Avatar ist beispielsweise auf md festgelegt:

export default {
  slots: {
    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated',
    image: 'h-full w-full rounded-[inherit] object-cover'
  },
  variants: {
    size: {
      sm: {
        root: 'size-7 text-sm'
      },
      md: {
        root: 'size-8 text-base'
      },
      lg: {
        root: 'size-9 text-lg'
      }
    }
  },
  defaultVariants: {
    size: 'md'
  }
}

Compound-Varianten

Einige Komponenten verwenden die compoundVariants-Eigenschaft, um Klassen anzuwenden, wenn mehrere Variantenbedingungen gleichzeitig erfüllt sind.

Beispielsweise verwendet die Komponente Button die Eigenschaft compoundVariants, um Klassen für eine bestimmte Kombination aus color und variant anzuwenden:

import type { ModuleOptions } from '../module'

export default (options: Required<ModuleOptions>) => ({
  slots: {
    base: ['rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme.transitions && 'transition-colors']
  },
  variants: {
    color: {
      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
      neutral: ''
    },
    variant: {
      solid: '',
      outline: '',
      soft: '',
      subtle: '',
      ghost: '',
      link: ''
    }
  },
  compoundVariants: [
    ...(options.theme.colors || []).map((color: string) => ({
      color,
      variant: 'outline',
      class: `ring ring-inset ring-${color}/50 text-${color} hover:bg-${color}/10 active:bg-${color}/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent outline-${color}/25 focus-visible:outline-3 focus-visible:ring-${color}`
    })),
    {
      color: 'neutral',
      variant: 'outline',
      class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
    }
  ],
  defaultVariants: {
    color: 'primary',
    variant: 'solid'
  }
})

Customize Themes für Windows

Sie haben mehrere Möglichkeiten, das Erscheinungsbild von Nuxt UI-Komponenten anzupassen, Sie können dies für alle Komponenten gleichzeitig oder pro Komponente tun.

Global config (Deutsche Übersetzung)

Sie können das Thema der Komponenten global in Ihrem app.config.ts überschreiben, indem Sie genau die gleiche Struktur wie das Theme-Objekt verwenden.

Sie können das Thema der Komponenten global in Ihrem vite.config.ts überschreiben, indem Sie genau die gleiche Struktur wie das Theme-Objekt verwenden.

Sie können die slots, variants, compoundVariants und defaultVariants einer Komponente anpassen, um das Standarddesign einer Komponente zu ändern:

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold'
      },
      variants: {
        size: {
          md: {
            leadingIcon: 'size-4'
          }
        }
      },
      compoundVariants: [{
        color: 'neutral',
        variant: 'outline',
        class: 'ring-default hover:bg-accented'
      }],
      defaultVariants: {
        color: 'neutral',
        variant: 'outline'
      }
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        button: {
          slots: {
            base: 'font-bold'
          },
          variants: {
            size: {
              md: {
                leadingIcon: 'size-4'
              }
            }
          },
          compoundVariants: [{
            color: 'neutral',
            variant: 'outline',
            class: 'ring-default hover:bg-accented'
          }],
          defaultVariants: {
            color: 'neutral',
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Standardmäßig werden diese Klassen mit den Standardwerten der Komponente zusammengeführt. Sie können einen Slot auch auf eine Funktion setzen, um sie stattdessen zu ersetzen. Er erhält die Standardklassen des Slots als Argument, sodass Sie einen Teil davon wiederverwenden können. Klassen von variants und compoundVariants gelten weiterhin oben, genau wie beim Übergeben einer Zeichenfolge.

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        label: () => 'text-base font-bold'
      }
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        button: {
          slots: {
            label: () => 'text-base font-bold'
          }
        }
      }
    })
  ]
})

Theme-Komponente

Die Theme-Komponente überschreibt Slots und Prop-Defaults für alle ihre Nachkommen, ohne den Rest der App zu beeinflussen. aber die ui und class Requisiten immer noch über it. Slots akzeptieren die gleiche Funktion Form, um ihre Klassen zu ersetzen, anstatt merging. It wird an der gleichen Stelle wie die ui aufgelöst prop, so verhält es sich auf die gleiche Weise.

<template>
  <UTheme
    :ui="{
      button: {
        base: 'rounded-full'
      }
    }"
  >
    <div class="flex items-center gap-2">
      <UButton label="Button" color="neutral" />
      <UButton label="Button" color="neutral" variant="outline" />
      <UButton label="Button" color="neutral" variant="subtle" />
    </div>
  </UTheme>
</template>

ui prop auf

Sie können auch die slots einer Komponente überschreiben, indem Sie die ui-Prop verwenden, die sowohl die globale Konfiguration als auch die aufgelöste variants bevorzugt.

<template>
  <UButton
    trailing-icon="i-lucide-chevron-right"
    size="md"
    color="neutral"
    variant="outline"
    :ui="{
      trailingIcon: 'rotate-90 size-3'
    }"
  >
    Button
  </UButton>
</template>

Ein Slot-Wert kann auch eine Funktion sein, um seine Klassen zu ersetzen, anstatt sie zusammenzuführen:

<template>
  <UButton :ui="{ label: () => 'text-base font-bold' }" label="Button" />
</template>

class prop (englisch)

Verwenden Sie die class-Prop, um die Klassen des root-oder base-Steckplatzes zu überschreiben. Dies hat Vorrang sowohl vor der globalen Konfiguration als auch vor dem aufgelösten variants.

<template>
  <UButton class="font-bold rounded-full">Button</UButton>
</template>