Switch tile

This component uses Switch toggle together with the corresponding CSS components (Switch and Tile).

Live example

My label

My label

My label

Some extra description about the setting goes here

My label

Usage

Only label

<script setup>
import { ref } from 'vue'
import { SwitchTile } from '@tickster/ui-framework/library.mjs'

const myRef1 = ref("")
</script>

<template>
    <switch-tile v-model="myRef1" :label="`My label`" />
</template>

With description

<script setup>
import { ref } from 'vue'
import { SwitchTile } from '@tickster/ui-framework/library.mjs'

const myRef2 = ref("")
</script>

<template>
    <switch-tile v-model="myRef2" :label="`My label`">
        Some extra description about the setting goes here
    </switch-tile>
</template>

Component source

<script setup>
import SwitchToggle from "./SwitchToggle.vue";

const model = defineModel();
const props = defineProps({
    label: {
        type: String,
        required: true
    }
});
</script>

<template>
    <div class="c-tile">
        <div class="c-tile__head">
            <h3 class="c-tile__title u-font--medium">{{ props.label }}</h3>
            <slot></slot>
        </div>
        <div class="c-tile__body">
            <switch-toggle v-model="model" :label="props.label" />
        </div>
    </div>
</template>