Флажок

LhCheckbox поддерживает независимое логическое значение, LhCheckboxGroup — значение-массив для нескольких опций.

Самостоятельное использование

Я прочитал(а) и согласен(на)

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhCheckbox } from '@lh-ui/vue3'

const accepted = ref(false)
</script>

<template>
  <LhCheckbox v-model="accepted" label="Я прочитал(а) и согласен(на)" />
</template>

vue

<script>
import { LhCheckbox } from '@lh-ui/vue3'

export default {
  components: { LhCheckbox },
  data() {
    return {
      accepted: false
    }
  }
}
</script>

<template>
  <LhCheckbox v-model="accepted" label="Я прочитал(а) и согласен(на)" />
</template>

Использование в группе

VueReactSvelte

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

const selected = ref(['vue'])
</script>

<template>
  <LhCheckboxGroup v-model="selected" name="framework">
    <LhCheckbox value="vue" label="Vue" />
    <LhCheckbox value="react" label="React" />
    <LhCheckbox value="svelte" label="Svelte" />
  </LhCheckboxGroup>
</template>

vue

<script>
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

export default {
  components: { LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      selected: ['vue']
    }
  }
}
</script>

<template>
  <LhCheckboxGroup v-model="selected" name="framework">
    <LhCheckbox value="vue" label="Vue" />
    <LhCheckbox value="react" label="React" />
    <LhCheckbox value="svelte" label="Svelte" />
  </LhCheckboxGroup>
</template>

Пользовательская тема

Применение к флажкам собственных фирменных цветов.

Вариант 1Вариант 2

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

const selected = ref(['option1'])
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="option1" label="Вариант 1" />
      <LhCheckbox value="option2" label="Вариант 2" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      selected: ['option1'],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="option1" label="Вариант 1" />
      <LhCheckbox value="option2" label="Вариант 2" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

Остальные темы — в разделе Кастомизация темы.

Интернационализация

Текст флажка можно интернационализировать через LhConfigProvider с языковыми пакетами.

Vue框架React框架

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const selected = ref(['vue'])
</script>

<template>
  <!-- Настройка языкового пакета -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhCheckbox value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhCheckbox, LhCheckboxGroup } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhCheckbox, LhCheckboxGroup },
  data() {
    return {
      locale: 'zh-CN',
      selected: ['vue'],
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- Настройка языкового пакета -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhCheckboxGroup v-model="selected">
      <LhCheckbox value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhCheckbox value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhCheckboxGroup>
  </LhConfigProvider>
</template>

Отключение, неопределённое состояние и размер

Автономный флажок отключается через disabled, неопределённое состояние показывается через indeterminate, размер регулируется size; группа отключается целиком через disabled, а size задаёт единый размер флажков в группе.

Отключённое состояниеНеопределённое состояниеsmalllarge

Вариант AВариант B

vue

<script setup lang="ts">
import { ref } from 'vue'

const demoCbDisabled = ref(true)
const demoCbIndeterminate = ref(false)
const demoIndeterminate = ref(true)
const demoCbSmall = ref(false)
const demoCbLarge = ref(false)
const demoCbGroupDisabled = ref<string[]>([])
const demoCbGroupSize = ref<string[]>([])
</script>

<template>
  <!-- Отключён -->
  <LhCheckbox v-model="demoCbDisabled" disabled label="Отключённое состояние" />
  <!-- Неопределённое состояние -->
  <LhCheckbox v-model="demoCbIndeterminate" :indeterminate="demoIndeterminate" label="Неопределённое состояние" />
  <!-- Маленький размер -->
  <LhCheckbox v-model="demoCbSmall" size="small" label="small" />
  <!-- Большой размер -->
  <LhCheckbox v-model="demoCbLarge" size="large" label="large" />
  <!-- Группа отключена целиком -->
  <LhCheckboxGroup v-model="demoCbGroupDisabled" disabled>
    <LhCheckbox value="a" label="Вариант A" />
    <LhCheckbox value="b" label="Вариант B" />
  </LhCheckboxGroup>
  <!-- Единый большой размер в группе -->
  <LhCheckboxGroup v-model="demoCbGroupSize" size="large">
    <LhCheckbox value="a" label="Вариант A" />
    <LhCheckbox value="b" label="Вариант B" />
  </LhCheckboxGroup>
</template>

vue

<script>
export default {
  data() {
    return {
      demoCbDisabled: true,
      demoCbIndeterminate: false,
      demoIndeterminate: true,
      demoCbSmall: false,
      demoCbLarge: false,
      demoCbGroupDisabled: [],
      demoCbGroupSize: [],
    }
  },
}
</script>

<template>
  <!-- Отключён -->
  <LhCheckbox v-model="demoCbDisabled" disabled label="Отключённое состояние" />
  <!-- Неопределённое состояние -->
  <LhCheckbox v-model="demoCbIndeterminate" :indeterminate="demoIndeterminate" label="Неопределённое состояние" />
  <!-- Маленький размер -->
  <LhCheckbox v-model="demoCbSmall" size="small" label="small" />
  <!-- Большой размер -->
  <LhCheckbox v-model="demoCbLarge" size="large" label="large" />
  <!-- Группа отключена целиком -->
  <LhCheckboxGroup v-model="demoCbGroupDisabled" disabled>
    <LhCheckbox value="a" label="Вариант A" />
    <LhCheckbox value="b" label="Вариант B" />
  </LhCheckboxGroup>
  <!-- Единый большой размер в группе -->
  <LhCheckboxGroup v-model="demoCbGroupSize" size="large">
    <LhCheckbox value="a" label="Вариант A" />
    <LhCheckbox value="b" label="Вариант B" />
  </LhCheckboxGroup>
</template>

Checkbox API

LhCheckbox Props

Свойство	Описание	Тип	По умолчанию
modelValue	Состояние выбора в автономном режиме	`boolean`	`false`
value	Значение, отправляемое в режиме группы	`unknown`	—
label	Текст метки	`string`	—
disabled	Отключён ли флажок	`boolean`	`false`
indeterminate	Неопределённое состояние	`boolean`	`false`
name	—	`string`	—
size	Размер	`"small" \| "medium" \| "large"`	`'medium'`
sx	Сокращённые свойства компоновки sx	`LhSxProps`	—

LhCheckboxGroup Props

Свойство	Описание	Тип	По умолчанию
model-value	Значение выбора в режиме группы	`unknown[]`	`[]`
disabled	Отключить ли всю группу	`boolean`	`false`
name	Нативное имя формы	`string`	—
size	Размер флажков в группе	`'small' \| 'medium' \| 'large'`	`'medium'`

Events

Событие	Описание	Параметр
update:modelValue	Значение изменилось	`value: boolean` или `value[]`
change	Изменился выбор	`value`

Slots

Слот	Описание
default	Пользовательское содержимое

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/checkbox/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhCheckboxSize

export type LhCheckboxSize = 'small' | 'medium' | 'large'

LhCheckboxProps

export interface LhCheckboxProps {
  modelValue?: boolean
  value?: unknown
  label?: string
  disabled?: boolean
  indeterminate?: boolean
  name?: string
  size?: LhCheckboxSize
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhCheckboxGroupProps

export interface LhCheckboxGroupProps {
  modelValue?: unknown[]
  disabled?: boolean
  name?: string
  size?: LhCheckboxSize
}

Флажок ​

Самостоятельное использование ​

Использование в группе ​

Пользовательская тема ​

Интернационализация ​

Отключение, неопределённое состояние и размер ​

Checkbox API ​

LhCheckbox Props ​

LhCheckboxGroup Props ​

Events ​

Slots ​

Типы ​