Componenten aanpassen

Tailwind Varianten

Nuxt UI-componenten worden gestyled met behulp van de Tailwind Variants API, die een krachtige manier biedt om varianten te maken en componentstijlen te beheren.

Slots

Componenten kunnen meerdere slots hebben, die elk een afzonderlijk HTML-element of -sectie binnen de component vertegenwoordigen. Deze slots zorgen voor flexibele invoeging en styling van inhoud.

Laten we de Card als voorbeeld nemen met meerdere slots:

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>

Sommige componenten hebben geen slots, ze zijn gewoon samengesteld uit een enkel root-element. In dit geval definieert het thema alleen de base-sleuf zoals de Container component bijvoorbeeld:

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>

Varianten

Componenten ondersteunen variants, die de stijlen van verschillende slots dynamisch aanpassen op basis van componentsteunen.

De Avatar component gebruikt bijvoorbeeld een size-variant om het uiterlijk te regelen:

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'
  }
}

Op deze manier past de size prop de bijbehorende stijlen toe op de root-sleuf:

size

lg

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

Standaard varianten

De eigenschap defaultVariants stelt de standaardwaarde in voor elke variant wanneer er geen prop is doorgegeven.

De standaardgrootte van de Avatar component is bijvoorbeeld ingesteld op md:

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'
  }
}

Samengestelde Varianten

Sommige componenten gebruiken de eigenschap compoundVariants om klassen toe te passen wanneer tegelijkertijd aan meerdere variantvoorwaarden wordt voldaan.

De Button gebruikt bijvoorbeeld de eigenschap compoundVariants om klassen toe te passen voor een specifieke combinatie van color en variant:

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'
  }
})

Thema aanpassen

U hebt meerdere manieren om het uiterlijk van Nuxt UI-componenten aan te passen, u kunt dit voor alle componenten tegelijk of per component doen.

Globale configuratie

U kunt het thema van componenten wereldwijd in uw app.config.ts overschrijven door exact dezelfde structuur te gebruiken als het thema-object.

U kunt het thema van componenten wereldwijd in uw vite.config.ts overschrijven door exact dezelfde structuur te gebruiken als het thema-object.

U kunt de slots, variants, compoundVariants en defaultVariants van een component aanpassen om het standaardthema van een component te wijzigen:

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'
          }
        }
      }
    })
  ]
})

Standaard worden deze klassen samengevoegd met de standaardwaarden van de component. U kunt ook een slot instellen op een functie om ze in plaats daarvan te vervangen. Het ontvangt de standaardklassen van de slot als argument, dus u kunt een deel ervan hergebruiken. Klassen van variants en compoundVariants gelden nog steeds bovenop, precies zoals wanneer je een string passeert.

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'
          }
        }
      }
    })
  ]
})

Thema onderdeel

De Theme component heeft voorrang op slots en prop-standaardinstellingen voor al zijn nakomelingen, zonder de rest van de app te beïnvloeden. Dit heeft voorrang op de globale configuratie, maar de ui en class rekwisieten winnen er nog steeds van. Slots accepteren hetzelfde functieformulier om hun klassen te vervangen in plaats van samen te voegen. Het is opgelost op hetzelfde punt als de ui prop, dus het gedraagt zich op dezelfde manier.

<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 voor

Je kunt ook de slots van een component overschrijven met de ui prop. Dit heeft voorrang op zowel de globale configuratie als de opgeloste variants.

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

Een slotwaarde kan ook een functie zijn om zijn klassen te vervangen in plaats van ze samen te voegen:

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

class prop

Gebruik de class prop om de klassen van de root of base slot te overschrijven. Dit heeft voorrang op zowel globale config als opgeloste variants.

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