Skip to content
Meeko
Type to search the guides and the API reference. Open it from any page with / or Ctrl K; move with the arrow keys and open a result with Enter.
Get started

Contents

On this page

Not translated yet

This page has not been translated into English yet, so it is shown in Spanish.

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.

ts
import type { MeekoThemeToggleProps } from "@meekojs/meeko/framework";

Source code src/framework.ts:333

Declaración #

ts
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 #

meeko
<!-- 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 #

propiedad sólo lectura opcional

readonly mode?: 'cycle' | 'select'

"cycle" (por defecto), un botón que pasa a la elección siguiente; "select", un grupo de radios.

themes #

propiedad sólo lectura opcional

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 #

propiedad sólo lectura opcional

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 #

propiedad sólo lectura opcional

readonly messages?: ThemeToggleMessages

Textos accesibles del botón y del grupo (cycle(current, next), unknown y group), para traducirlos.

class #

propiedad sólo lectura opcional

readonly class?: string

Clases del elemento raíz, el <form>.

id #

propiedad sólo lectura opcional

readonly id?: string

id del elemento raíz, el <form>.

See also #

Was this page helpful?

Add a comment

It is sent when you choose “Yes” or “No”. Only the page, your answer and the comment are stored: no cookies and no personal data.

0 of 2000 characters

Edit on GitHub: packages/meeko/src/framework.ts