Interrupteur

LhSwitch permet de basculer entre deux états opposés.

Utilisation de base

Utilisation de base

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

const status = ref(false)
</script>

<template>
  <!-- Interrupteur de base -->
  <LhSwitch v-model="status" />
</template>

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

<template>
  <!-- Interrupteur de base -->
  <LhSwitch v-model="status" />
</template>

Libellés

Libellés

Marche

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

const notification = ref(true)
</script>

<template>
  <LhSwitch v-model="notification" active-text="Marche" inactive-text="Arrêt" />
</template>

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

<template>
  <LhSwitch v-model="notification" active-text="Marche" inactive-text="Arrêt" />
</template>

Tailles

Tailles

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

Désactivé et chargement

Désactivé et chargement

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

Thème personnalisé

Appliquez une couleur de thème personnalisée à l'interrupteur.

Thème porcelaine bleue

<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>
  <!-- Thème porcelaine bleue -->
  <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>
  <!-- Thème porcelaine bleue -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

Internationalisation

Configurez le pack de langue global via LhConfigProvider.

Internationalisation

<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>
  <!-- Configuration du pack de langue -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Changer de langue
    </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>
  <!-- Configuration du pack de langue -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Changer de langue
    </LhButton>
  </LhConfigProvider>
</template>

Attribut name natif

name définit l'attribut name du champ natif (pour la soumission de formulaire).

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	Description	Type	Valeur par défaut
modelValue	État actuel	boolean	false
disabled	Désactivé ou non	boolean	false
loading	En cours de chargement ou non	boolean	false
name	Nom natif du formulaire	string	''
size	Taille	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
activeText	Texte à l'état activé	string	''
inactiveText	Texte à l'état désactivé	string	''
sx	Props de mise en page sx	LhSxProps	—

Events

Événement	Description	Paramètre
update:modelValue	L'état change	(value: boolean)
change	L'état change	(value: boolean)

Déclenche les événements update:modelValue (nouvelle valeur booléenne) et change. La bascule est également possible au clavier avec les touches Entrée et Espace.

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/switch/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhSwitchProps

export interface LhSwitchProps {
  modelValue?: boolean
  disabled?: boolean
  loading?: boolean
  name?: string
  size?: LhComponentSize
  activeText?: string
  inactiveText?: string
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhSwitchSize

export type LhSwitchSize = LhComponentSize

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

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