Interruptor

LhSwitch sirve para alternar entre dos estados opuestos.

Uso básico

Uso básico

<script setup lang="ts">
import { ref } from 'vue'

const status = ref(false)
</script>

<template>
  <!-- Interruptor básico -->
  <LhSwitch v-model="status" />
</template>

<script>
export default {
  data() {
    return { status: false }
  },
}
</script>

<template>
  <!-- Interruptor básico -->
  <LhSwitch v-model="status" />
</template>

Etiquetas de texto

Etiquetas de texto

Activado

<script setup lang="ts">
import { ref } from 'vue'

const notification = ref(true)
</script>

<template>
  <LhSwitch v-model="notification" active-text="Activado" inactive-text="Desactivado" />
</template>

<script>
export default {
  data() {
    return { notification: true }
  },
}
</script>

<template>
  <LhSwitch v-model="notification" active-text="Activado" inactive-text="Desactivado" />
</template>

Tamaño

Tamaño

<script setup lang="ts">
import { ref } from 'vue'

const smallVal = ref(false)
const mediumVal = ref(false)
const largeVal = ref(false)
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

<script>
export default {
  data() {
    return {
      smallVal: false,
      mediumVal: false,
      largeVal: false,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

Deshabilitado y carga

Deshabilitado y loading

<script setup lang="ts">
import { ref } from 'vue'

const disabledVal = ref(true)
const loadingVal = ref(true)
const swName = ref(false)
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

<script>
export default {
  data() {
    return {
      disabledVal: true,
      loadingVal: true,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

Tema personalizado

Aplica un color de tema personalizado al interruptor.

Tema porcelana azul y blanco

<script setup lang="ts">
import { LhConfigProvider, LhSwitch } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <!-- Tema porcelana azul y blanco -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSwitch } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSwitch },
  data() {
    return {
      status: false,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- Tema porcelana azul y blanco -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

Internacionalización

Configura el paquete de idioma global mediante LhConfigProvider.

Internacionalización

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
const status = ref(false)
</script>

<template>
  <!-- Configuración del paquete de idioma -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Cambiar idioma
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSwitch, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      status: false,
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <!-- Configuración del paquete de idioma -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Cambiar idioma
    </LhButton>
  </LhConfigProvider>
</template>

name nativo

name establece el atributo name del input nativo (para el envío del formulario).

name

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(false)
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
</template>

<script>
export default {
  data() {
    return { value: false }
  },
}
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
</template>

API

Props

Prop	Descripción	Tipo	Predeterminado
modelValue	Estado actual	boolean	false
disabled	Si se deshabilita	boolean	false
loading	Si está cargando	boolean	false
name	Nombre del formulario nativo	string	''
size	Tamaño	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
activeText	Texto cuando está activado	string	''
inactiveText	Texto cuando está desactivado	string	''
sx	Props de maquetación rápida sx	LhSxProps	—

Eventos

Evento	Descripción	Parámetro
update:modelValue	Cambio de estado	(value: boolean)
change	Cambio de estado	(value: boolean)

Se disparan los eventos update:modelValue (el nuevo valor booleano) y change. Admite la conmutación con Enter y Space desde el teclado.

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/switch/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhSwitchProps

export interface LhSwitchProps {
  modelValue?: boolean
  disabled?: boolean
  loading?: boolean
  name?: string
  size?: LhComponentSize
  activeText?: string
  inactiveText?: string
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhSwitchSize

export type LhSwitchSize = LhComponentSize

LhComponentSize _{(de @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]