O componente ColorModeButton estende o componente Button, então você pode passar qualquer propriedade como color, variant, size, etc.
<template>
<NColorModeButton />
</template>
color="neutral" e variant="ghost".Use o app.config.ts para personalizar o ícone com a propriedade ui.icons:
export default defineAppConfig({
ui: {
icons: {
light: 'i-ph-sun',
dark: 'i-ph-moon'
}
}
})
Use o vite.config.ts para personalizar o ícone com a propriedade ui.icons:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
icons: {
light: 'i-ph-sun',
dark: 'i-ph-moon'
}
}
})
]
})
Como o botão é envolvido em um componente ClientOnly, você pode passar um slot fallback para exibir um placeholder enquanto o componente está carregando.
<template>
<NColorModeButton>
<template #fallback>
<NButton loading variant="ghost" color="neutral" />
</template>
</NColorModeButton>
</template>
| Prop | Default | Type |
|---|---|---|
as | 'button' | anyThe element or component this component should render as when not a link. |
color | 'neutral' | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'ghost' | "link" | "ghost" | "solid" | "outline" | "soft" | "subtle" |
trailingIcon | anyDisplay an icon on the right side. | |
name | string | |
trailing | boolean When | |
loading | boolean When | |
icon | anyDisplay an icon based on the | |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
avatar | AvatarPropsDisplay an avatar on the left side. | |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
type | 'button' | "reset" | "submit" | "button"The type of the button when not a link. |
label | string | |
activeColor | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error" | "neutral" | |
activeVariant | "link" | "ghost" | "solid" | "outline" | "soft" | "subtle" | |
square | boolean Render the button with equal padding on all sides. | |
block | boolean Render the button full width. | |
loadingAuto | boolean Set loading state automatically based on the | |
leading | boolean When | |
leadingIcon | anyDisplay an icon on the left side. | |
loadingIcon | appConfig.ui.icons.loading | anyThe icon when the |
ui | { base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; } |
| Slot | Type |
|---|