BjToggle

Interrupteur Vue (case à cocher stylée) avec v-model booléen, libellé, aide, bordure optionnelle, libellé à gauche et état désactivé.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjToggle } from '@flrxnt/dsbj/vue'

const notify = ref(true)
</script>

<template>
  <BjToggle v-model="notify" label="Notifications par e-mail" hint="Résumé quotidien" border />
</template>

Aperçu

Notifications par e-mail Résumé quotidien

Désactivé (v-model false)

Notifications push

<BjToggle v-model="push" label="Notifications push" />

Avec bordure (border)

Mode sombre

<BjToggle v-model="dark" label="Mode sombre" border />

Libellé à gauche (labelLeft)

Synchronisation

<BjToggle v-model="sync" label="Synchronisation" label-left />

Bordure × libellé à gauche

Fonctionnalités bêta Peut être instable

<BjToggle v-model="beta" label="Fonctionnalités bêta" border label-left hint="Peut être instable" />

Interrupteur désactivé

Verrouillé par l’admin

<BjToggle v-model="on" label="Verrouillé par l’admin" :disabled="true" />

Avec hint

Analytics Données agrégées uniquement

Props

Prop	Description
`modelValue`	État activé (v-model), booléen.
`label`	Texte du libellé (contenu par défaut du slot).
`hint`	Texte d’aide sous le libellé.
`disabled`	Désactive l’interrupteur.
`border`	Ajoute une bordure autour du contrôle (bj-toggle--border).
`labelLeft`	Affiche le libellé à gauche du curseur (bj-toggle--label-left).