Radio Svelte 元件

Radio Svelte 元件代表 Radio 元件。

Radio 元件

包含以下元件

單選按鈕

Radio 屬性

屬性	類型	說明
<Radio> 屬性
checked	布林值	定義 radio 輸入是否已選取
名稱	字串數字	Radio 輸入名稱
值	字串數字布林值	Radio 輸入值
已停用	布林值	定義 radio 輸入是否已停用
唯讀	布林值	定義 radio 輸入是否為唯讀

Radio 事件

事件	說明
<Radio> 事件
變更	當 radio 輸入狀態變更時，將觸發事件

Radio 清單

Radio 清單並非獨立元件，僅為使用 <List>、<ListItem> 的特定案例。

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

範例

radio.svelte

<script>
  import { Navbar, Page, BlockTitle, Block, List, ListItem, Radio } from 'framework7-svelte';
</script>

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

  <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" checked />
      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" checked />
    <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" checked />
    <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 mediaList strongIos outlineIos dividersIos>
    <ListItem
      radio
      radioIcon="start"
      checked
      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 事件
Radio 清單
範例