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

primarysecondaryinfosuccesswarningdangertheme

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',
    'theme',
  ]
</script>