shadcn_ui-radio-group

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Radio Group

Shadcn UI — 单选按钮组

Instructions

使用说明

ShadRadioGroup<T>

is a set of radio buttons where at most one can be selected. Provide

items

as a list of

ShadRadio<T>

with

value

and

label

. Use

ShadRadioGroupFormField<T>

inside

ShadForm

with

id

label

items

, and

validator

ShadRadioGroup<T>

是一组单选按钮，最多只能选中其中一个。需传入

items

参数，其为包含

value

和

label

的

ShadRadio<T>

列表。在

ShadForm

中使用

ShadRadioGroupFormField<T>

时，需配置

id

、

label

、

items

和

validator

参数。

Standalone

独立使用

dart

ShadRadioGroup<String>(
  items: [
    ShadRadio(label: Text('Default'), value: 'default'),
    ShadRadio(label: Text('Comfortable'), value: 'comfortable'),
    ShadRadio(label: Text('Nothing'), value: 'nothing'),
  ],
)

dart

ShadRadioGroup<String>(
  items: [
    ShadRadio(label: Text('Default'), value: 'default'),
    ShadRadio(label: Text('Comfortable'), value: 'comfortable'),
    ShadRadio(label: Text('Nothing'), value: 'nothing'),
  ],
)

Form field

表单字段使用

dart

enum NotifyAbout { all, mentions, nothing; }

ShadRadioGroupFormField<NotifyAbout>(
  label: const Text('Notify me about'),
  items: NotifyAbout.values.map(
    (e) => ShadRadio(
      value: e,
      label: Text(e.message),
    ),
  ),
  validator: (v) {
    if (v == null) return 'You need to select a notification type.';
    return null;
  },
)

dart

enum NotifyAbout { all, mentions, nothing; }

ShadRadioGroupFormField<NotifyAbout>(
  label: const Text('Notify me about'),
  items: NotifyAbout.values.map(
    (e) => ShadRadio(
      value: e,
      label: Text(e.message),
    ),
  ),
  validator: (v) {
    if (v == null) return 'You need to select a notification type.';
    return null;
  },
)