MeekoThemeToggleProps
interfaz Since 1.4.0
Props de la etiqueta propia <MeekoThemeToggle>, el selector de tema que Meeko compila y
distribuye con theme en meeko.config.ts. Todas son opcionales; themes y labels usan las
elecciones de la configuración (ThemeChoice). Además admite un snippet por elección, su
icono (ThemeToggleSnippets). El editor muestra estas props en el hover de la etiqueta y
lleva aquí con «Ir a definición». Se autoimporta en app/ y en los componentes, como
MeekoLinkProps; un tipo propio del proyecto con el mismo nombre tiene prioridad.
import type { MeekoThemeToggleProps } from "@meekojs/meeko/framework";Source code src/framework.ts:333
Declaración #
interface MeekoThemeToggleProps {
readonly mode?: 'cycle' | 'select'
readonly themes?: readonly ThemeChoice[]
readonly labels?: Partial<Record<ThemeChoice, string>>
readonly messages?: ThemeToggleMessages
readonly class?: string
readonly id?: string
}Example #
<!-- app/components/ThemeSwitch.meeko: envuelve el selector y recibe su modo -->
<script lang="ts">
const props = defineProps<{ mode: NonNullable<MeekoThemeToggleProps["mode"]> }>();
</script>
<template>
<MeekoThemeToggle bind:mode="props.mode" class="switch" />
</template>Propiedades #
mode
#
readonly mode?: 'cycle' | 'select'"cycle" (por defecto), un botón que pasa a la elección siguiente; "select", un grupo de radios.
themes
#
readonly themes?: readonly ThemeChoice[]Elecciones y su orden, como bind:themes="['light', 'dark']"; por defecto, los temas de la configuración y "system" si está activo.
labels
#
readonly labels?: Partial<Record<ThemeChoice, string>>Nombre de cada elección, como bind:labels="{ dark: 'Oscuro' }"; por defecto, «Claro», «Oscuro», «Sistema» y el nombre de los demás temas.
messages
#
readonly messages?: ThemeToggleMessagesTextos accesibles del botón y del grupo (cycle(current, next), unknown y group), para traducirlos.
See also #
- <MeekoThemeToggle> Framework full-stack