單選按鈕 React 元件

單選按鈕 React 元件代表單選按鈕元件。

單選按鈕元件

包含下列元件

單選按鈕

單選按鈕屬性

屬性	類型	說明
<Radio> 屬性
checked	布林值	定義單選按鈕輸入是否已選取
defaultChecked	布林值	定義核取方塊輸入是否已選取，適用於不受控元件的情況
name	字串數字	單選按鈕輸入名稱
value	字串數字布林值	單選按鈕輸入值
disabled	布林值	定義單選按鈕輸入是否已停用
readonly	布林值	定義單選按鈕輸入是否為唯讀

單選按鈕事件

事件	說明
<Radio> 事件
change	當單選按鈕輸入狀態變更時觸發事件

單選按鈕清單

單選按鈕清單並非獨立元件，而僅是使用 <List>、<ListItem> 的特殊情況。

<List>
  {/* Additional "radio" prop to enable radio list item */}
  <ListItem radio value="check_1" name="demo-radio" checked title="Radio 1"></ListItem>
  <ListItem radio value="check_2" name="demo-radio" title="Radio 2"></ListItem>
</List>

範例

radio.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, Block, List, ListItem, Radio } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Radio"></Navbar>

    <BlockTitle>Inline</BlockTitle>
    <Block strongIos outlineIos>
      <p>
        Lorem <Radio name="demo-radio-inline" value="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" defaultChecked /> ad delectus impedit
        tempore nemo, enim vel praesentium consequatur nulla mollitia!
      </p>
    </Block>

    <BlockTitle>Radio Group</BlockTitle>
    <List strongIos outlineIos dividersIos>
      <ListItem
        radio
        radioIcon="start"
        title="Books"
        name="demo-radio-start"
        value="Books"
        defaultChecked
      />
      <ListItem radio radioIcon="start" title="Movies" value="Movies" name="demo-radio-start" />
      <ListItem radio radioIcon="start" title="Food" value="Food" name="demo-radio-start" />
      <ListItem radio radioIcon="start" title="Drinks" value="Drinks" name="demo-radio-start" />
    </List>

    <List strongIos outlineIos dividersIos>
      <ListItem
        radio
        radioIcon="end"
        title="Books"
        name="demo-radio-end"
        value="Books"
        defaultChecked
      />
      <ListItem radio radioIcon="end" title="Movies" value="Movies" name="demo-radio-end" />
      <ListItem radio radioIcon="end" title="Food" value="Food" name="demo-radio-end" />
      <ListItem radio radioIcon="end" title="Drinks" value="Drinks" name="demo-radio-end" />
    </List>

    <BlockTitle>With Media Lists</BlockTitle>
    <List strongIos outlineIos dividersIos mediaList>
      <ListItem
        radio
        radioIcon="start"
        defaultChecked
        name="demo-media-radio"
        value="1"
        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."
      />
      <ListItem
        radio
        radioIcon="start"
        name="demo-media-radio"
        value="2"
        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."
      />
      <ListItem
        radio
        radioIcon="start"
        name="demo-media-radio"
        value="3"
        title="Facebook"
        after="16:48"
        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."
      />
      <ListItem
        radio
        radioIcon="start"
        name="demo-media-radio"
        value="4"
        title="John Doe (via Twitter)"
        after="15:32"
        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."
      />
    </List>
  </Page>
);

改善此文件

在此頁面

單選按鈕元件
單選按鈕屬性
單選按鈕事件
單選按鈕清單
範例