无线电 React 组件

无线电组件
无线电属性
无线电列表
示例

无线电组件

包含以下组件

无线电

无线电属性

名称	类型	默认值	描述
checked	布尔值	false	定义无线电输入是否被选中
colors	对象		包含 Tailwind CSS 颜色类的对象
colors.bgCheckedIos	字符串	'bg-primary'
colors.bgCheckedMaterial	字符串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIos	字符串	'border-primary'
colors.borderCheckedMaterial	字符串	'border-md-light-primary dark:border-md-dark-primary'
colors.borderIos	字符串	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterial	字符串	'border-md-light-outline dark:border-md-dark-outline'
component	字符串	'label'	组件的 HTML 元素
defaultChecked	布尔值	false	定义无线电输入是否被选中，适用于非受控组件的情况
disabled	布尔值	false	定义无线电输入是否被禁用
name	字符串		无线电输入名称
readOnly	布尔值	false	定义无线电输入是否为只读
touchRipple	布尔值	true	在 Material 主题中启用触摸涟漪效果
value	任何		无线电输入值
onChange	function(e)		当无线电状态更改时触发事件

无线电列表

无线电列表不是一个单独的组件，而只是使用 <List> 和 <ListItem> 组件的特定情况。

<List>
  {/* Additional "label" prop on ListItem */}
  <ListItem
    label
    title="Books"
    media={
      <>
        {/* Pass Radio to list item media */}
        <Radio component="div" name="my-checkbox" />
      </>
    }
  />
  <ListItem
    label
    title="Movies"
    media={
      <>
        {/* Pass Radio to list item media */}
        <Radio component="div" name="my-checkbox" />
      </>
    }
  />
</List>

示例

Radio.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Radio,
  BlockTitle,
  Block,
  List,
  ListItem,
} from 'konsta/react';

export default function RadioPage() {
  const [inlineValue, setInlineValue] = useState('inline-1');
  const [groupValue, setGroupValue] = useState('Books');
  const [mediaValue, setMediaValue] = useState('Item 1');

  return (
    <Page>
      <Navbar
        title="Radio"
        />

      <BlockTitle>Inline</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Lorem{' '}
          <Radio
            name="demo-radio-inline"
            value="inline-1"
            checked={inlineValue === 'inline-1'}
            onChange={() => setInlineValue('inline-1')}
          />{' '}
          ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo
          nihil aut eius commodi sint eveniet aliquid eligendi{' '}
          <Radio
            name="demo-radio-inline"
            value="inline-2"
            checked={inlineValue === 'inline-2'}
            onChange={() => setInlineValue('inline-2')}
          />{' '}
          ad delectus impedit tempore nemo, enim vel praesentium consequatur
          nulla mollitia!
        </p>
      </Block>

      <BlockTitle>Radio Group</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          media={
            <Radio
              component="div"
              value="Books"
              checked={groupValue === 'Books'}
              onChange={() => setGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          media={
            <Radio
              component="div"
              value="Movies"
              checked={groupValue === 'Movies'}
              onChange={() => setGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          media={
            <Radio
              component="div"
              value="Food"
              checked={groupValue === 'Food'}
              onChange={() => setGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          media={
            <Radio
              component="div"
              value="Drinks"
              checked={groupValue === 'Drinks'}
              onChange={() => setGroupValue('Drinks')}
            />
          }
        />
      </List>

      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          after={
            <Radio
              component="div"
              value="Books"
              checked={groupValue === 'Books'}
              onChange={() => setGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          after={
            <Radio
              component="div"
              value="Movies"
              checked={groupValue === 'Movies'}
              onChange={() => setGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          after={
            <Radio
              component="div"
              value="Food"
              checked={groupValue === 'Food'}
              onChange={() => setGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          after={
            <Radio
              component="div"
              value="Drinks"
              checked={groupValue === 'Drinks'}
              onChange={() => setGroupValue('Drinks')}
            />
          }
        />
      </List>

      <BlockTitle>With Media Lists</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Facebook"
          after="17:14"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Radio
              component="div"
              checked={mediaValue === 'Item 1'}
              onChange={() => setMediaValue('Item 1')}
            />
          }
        />
        <ListItem
          label
          title="John Doe (via Twitter)"
          after="17:11"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Radio
              component="div"
              checked={mediaValue === 'Item 2'}
              onChange={() => setMediaValue('Item 2')}
            />
          }
        />
      </List>
    </Page>
  );
}