Радиокнопка

LhRadio поддерживает автономное одиночное значение, LhRadioGroup — группу из нескольких вариантов для одиночного выбора.

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

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

МужскойЖенский

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

const gender = ref('male')
</script>

<template>
  <LhRadio v-model="gender" value="male" label="Мужской" />
  <LhRadio v-model="gender" value="female" label="Женский" />
</template>

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

export default {
  components: { LhRadio },
  data() {
    return {
      gender: 'male'
    }
  }
}
</script>

<template>
  <LhRadio v-model="gender" value="male" label="Мужской" />
  <LhRadio v-model="gender" value="female" label="Женский" />
</template>

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

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

VueReactSvelte

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

const selectedFramework = ref('vue')
</script>

<template>
  <LhRadioGroup v-model="selectedFramework" name="framework">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
    <LhRadio value="svelte" label="Svelte" />
  </LhRadioGroup>
</template>

<script>
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      selectedFramework: 'vue'
    }
  }
}
</script>

<template>
  <LhRadioGroup v-model="selectedFramework" name="framework">
    <LhRadio value="vue" label="Vue" />
    <LhRadio value="react" label="React" />
    <LhRadio value="svelte" label="Svelte" />
  </LhRadioGroup>
</template>

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

Применение к радиокнопкам пользовательского цвета темы.

Тема «сине-белый фарфор»

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

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

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

<template>
  <!-- Цвет темы «сине-белый фарфор» -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhRadioGroup v-model="selectedTheme">
      <LhRadio value="option1" label="Вариант 1" />
      <LhRadio value="option2" label="Вариант 2" />
      <LhRadio value="option3" label="Вариант 3" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

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

export default {
  components: { LhConfigProvider, LhRadio, LhRadioGroup },
  data() {
    return {
      selectedTheme: 'option1',
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- Цвет темы «сине-белый фарфор» -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhRadioGroup v-model="selectedTheme">
      <LhRadio value="option1" label="Вариант 1" />
      <LhRadio value="option2" label="Вариант 2" />
      <LhRadio value="option3" label="Вариант 3" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

Дополнительные темы см. в Настройка темы.

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

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

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

Vue框架React框架

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

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

<template>
  <!-- Языковой пакет внедряется в зависимости от текущего языка -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhRadioGroup v-model="selected">
      <!-- Текст переключается вместе с языком -->
      <LhRadio value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhRadio value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

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

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

<template>
  <!-- Языковой пакет внедряется в зависимости от текущего языка -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhRadioGroup v-model="selected">
      <!-- Текст переключается вместе с языком -->
      <LhRadio value="vue" :label="locale === 'zh-CN' ? 'Vue框架' : 'Vue Framework'" />
      <LhRadio value="react" :label="locale === 'zh-CN' ? 'React框架' : 'React Framework'" />
    </LhRadioGroup>
  </LhConfigProvider>
</template>

Отключение и размеры

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

Отключение и размеры

Отключённый вариантОтключён и выбран

smalllarge

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

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

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

const demoRadioDisabled = ref('')
const demoRadioDisabled2 = ref('1')
const demoRadioSmall = ref('1')
const demoRadioLarge = ref('1')
const demoRadioGroupDisabled = ref('a')
const demoRadioGroupSize = ref('a')
</script>

<template>
  <!-- Отключение -->
  <LhRadio v-model="demoRadioDisabled" value="1" disabled label="Отключённый вариант" />
  <!-- Отключён и выбран -->
  <LhRadio v-model="demoRadioDisabled2" value="1" disabled label="Отключён и выбран" />
  <!-- Размер small -->
  <LhRadio v-model="demoRadioSmall" value="1" size="small" label="small" />
  <!-- Размер large -->
  <LhRadio v-model="demoRadioLarge" value="1" size="large" label="large" />
  <!-- Отключение всей группы -->
  <LhRadioGroup v-model="demoRadioGroupDisabled" disabled>
    <LhRadio value="a" label="Вариант A" />
    <LhRadio value="b" label="Вариант B" />
  </LhRadioGroup>
  <!-- Единый размер large внутри группы -->
  <LhRadioGroup v-model="demoRadioGroupSize" size="large">
    <LhRadio value="a" label="Вариант A" />
    <LhRadio value="b" label="Вариант B" />
  </LhRadioGroup>
</template>

<script>
import { LhRadio, LhRadioGroup } from '@lh-ui/vue3'

export default {
  components: { LhRadio, LhRadioGroup },
  data() {
    return {
      demoRadioDisabled: '',
      demoRadioDisabled2: '1',
      demoRadioSmall: '1',
      demoRadioLarge: '1',
      demoRadioGroupDisabled: 'a',
      demoRadioGroupSize: 'a',
    }
  },
}
</script>

<template>
  <!-- Отключение -->
  <LhRadio v-model="demoRadioDisabled" value="1" disabled label="Отключённый вариант" />
  <!-- Отключён и выбран -->
  <LhRadio v-model="demoRadioDisabled2" value="1" disabled label="Отключён и выбран" />
  <!-- Размер small -->
  <LhRadio v-model="demoRadioSmall" value="1" size="small" label="small" />
  <!-- Размер large -->
  <LhRadio v-model="demoRadioLarge" value="1" size="large" label="large" />
  <!-- Отключение всей группы -->
  <LhRadioGroup v-model="demoRadioGroupDisabled" disabled>
    <LhRadio value="a" label="Вариант A" />
    <LhRadio value="b" label="Вариант B" />
  </LhRadioGroup>
  <!-- Единый размер large внутри группы -->
  <LhRadioGroup v-model="demoRadioGroupSize" size="large">
    <LhRadio value="a" label="Вариант A" />
    <LhRadio value="b" label="Вариант B" />
  </LhRadioGroup>
</template>

Radio API

LhRadio Props

Свойство	Описание	Тип	По умолчанию
modelValue	Выбранное значение в автономном режиме	unknown	—
value	Отправляемое значение	unknown	—
label	Текст метки	string	—
disabled	Отключён	boolean	false
name	Имя нативного поля формы	string	—
size	Размер	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
sx	Свойства быстрой разметки sx	LhSxProps	—

LhRadioGroup Props

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

Events

Событие	Описание	Параметры
update:modelValue	Значение изменилось	value: unknown
change	Выбор изменился	value: unknown

Slots

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

Определения типов

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

LhRadioSize

export type LhRadioSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhRadioProps

export interface LhRadioProps {
  modelValue?: unknown
  value?: unknown
  label?: string
  disabled?: boolean
  name?: string
  size?: LhRadioSize
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
}

LhRadioGroupProps

export interface LhRadioGroupProps {
  modelValue?: unknown
  disabled?: boolean
  name?: string
  size?: LhRadioSize
}