Чекбоскы

Чекобсы используются для выбора нескольких из многих

Перевернуть

never

gonna

give

you

up

Для разработчиков

Props

interface Props {
    modelValue: boolean // стейт бокса работает через vue-model
    text?: string // текст для отображения
    textPosition?: 'left' | 'right' // отвечает за позицию текста
}

Slots

Также есть возможность прокинуть текст через слот

<template>
    <PfmCheckBox 
        v-for="box in listToRender" 
        :key="box.name" 
        v-model="box.value" 
        :text-position="textRight ? 'left' : 'right'" 
        :text="box.name" 
    >
        <h3>
            Example
        </h3>
    </PfmCheckBox>
</template>

Пример использования

<script setup lang="ts">
const listToRender = reactive([
    new MockCheckBox('never', false),
    new MockCheckBox('gonna', false),
    new MockCheckBox('give', false),
    new MockCheckBox('you', false),
    new MockCheckBox('up', false),
])

</script>

<template>
    <div class="pfm-check-boxes-example__wrap">
        <div class="pfm-check-boxes-example__controls">
            <p>Перевернуть</p>
            <PfmToggleVue v-model="textRight" />
        </div>
        <div class="pfm-check-boxes-example">
            <PfmCheckBox 
                v-for="box in listToRender" 
                :key="box.name" 
                v-model="box.value" 
                :text-position="textRight ? 'left' : 'right'" 
                :text="box.name" 
            />
        </div>
    </div>
</template>