Skip to content

Флажок ​

На платформе Mini Program рисуется во view

Нативный компонент checkbox не используется (стили в MP не контролируются); вместо этого галочка рисуется во view + иконка lh-icon, что гарантирует визуальное единство с другими платформами семейства.

Базовое использование ​

vue
<template>
  <lh-checkbox v-model="checked" label="Согласен с условиями" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

Группа флажков ​

vue
<template>
  <lh-checkbox-group v-model="values">
    <lh-checkbox value="a" label="Вариант 1" />
    <lh-checkbox value="b" label="Вариант 2" />
    <lh-checkbox value="c" label="Вариант 3" disabled />
  </lh-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const values = ref(['a'])
</script>

Неопределённое состояние ​

vue
<lh-checkbox v-model="checked" indeterminate label="Выбрать все (часть выбрана)" />

Checkbox Props ​

ПропОписаниеТипПо умолчанию
modelValue (v-model)Отмечен лиbooleanfalse
valueЗначение-идентификатор в группеunknown—
labelТекстstring—
disabledОтключеноbooleanfalse
indeterminateНеопределённое состояниеbooleanfalse
nameНативное namestring—
sizeРазмер'small' | 'medium' | 'large'—
customClassПользовательский классstring—
sxБыстрые свойства раскладкиLhSxProps—

CheckboxGroup Props ​

ПропОписаниеТипПо умолчанию
modelValue (v-model)Массив выбранных значенийunknown[][]
disabledОтключить все дочерние элементыbooleanfalse
nameНативное namestring—
sizeРазмер (пробрасывается дочерним элементам)'small' | 'medium' | 'large'—

Events ​

СобытиеОписаниеПараметр колбэка
update:modelValueИзменение значения(value)
changeИзменение значения(value)