MazSwitch

MazSwitch is a standalone component that replaces the standard html input checkbox. Color options are available.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

primarysecondaryinfosuccesswarningdanger

Disabled

Disabled

<template>
  <MazSwitch
    v-for="color in colors"
    v-model="switchValue"
    :color="color"
    :name="color"
    :key="color"
  />

  <p>Disabled</p>

  <MazSwitch
    v-model="switchValue"
    name="disabled"
    disabled
  >
    {{ color }}
  </MazSwitch>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MazSwitch from 'maz-ui/components/MazSwitch'

  const switchValue = ref(false)
  const switchValueDisabled = ref(false)

  const colors = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
  ]
</script>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style	Style attribut of the component root element	TSIndexedAccessType	-	undefined
class	Class attribut of the component root element	TSIndexedAccessType	-	undefined
modelValue	The model value of the switch	boolean	-	false
id	The id of the switch	string	-	undefined
disabled	If the switch is disabled	boolean	-	false
name	The name of the switch	string	-	undefined
color	The color of the switch	Color	-	'primary'

Events

Event name	Properties	Description
update:model-value	value boolean - The new value	Emitted when the model value changes
change	value boolean - The new value	Emitted when the model value changes

Slots

Name	Description	Bindings
default	The label of the switch	value Boolean - The value of the switch