Radio React 元件

Radio 元件
Radio 屬性
Radios 列表
範例

Radio 元件

包含以下元件

單選按鈕

Radio 屬性

名稱	類型	預設值	描述
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	函式(e)		當單選狀態變更時會觸發的事件

Radios 列表

Radios 列表不是一個單獨的元件，只是使用 <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>
  );
}