Radio React 组件

Radio React 组件表示单选按钮组件。

Radio组件

包含以下组件：

Radio

Radio属性

属性	类型	描述
<Radio>属性
已选中	布尔值	定义单选输入是否被选中
defaultChecked	布尔值	定义复选框输入是否被选中，对于无控制组件的情况
name	字符串数字	单选输入名称
值	字符串数字布尔值	单选输入值
禁用	布尔值	定义单选输入是否禁用
只读	布尔值	定义单选输入是否只读

Radio事件

事件	描述
<Radio>事件
change	当单选输入状态改变时将触发事件

单选列表

单选列表不是一个单独的组件，而只是使用radio.svelte的特定情况<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>
);

改进此文档

在本页上

Radio组件
Radio属性
Radio事件
单选列表
示例