Radio Svelte 組件

單選按鈕組件
單選按鈕屬性
單選按鈕列表
範例

單選按鈕組件

包含以下組件

單選按鈕

單選按鈕屬性

名稱	類型	預設值	描述
checked	boolean	false	定義是否勾選單選按鈕輸入
colors	object		包含 Tailwind CSS 顏色類別的物件
colors.bgCheckedIos	string	'bg-primary'
colors.bgCheckedMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIos	string	'border-primary'
colors.borderCheckedMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.borderIos	string	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
component	string	'label'	組件的 HTML 元素
disabled	boolean	false	定義是否停用單選按鈕輸入
name	string		單選按鈕輸入名稱
readonly	boolean	false	定義是否唯讀單選按鈕輸入
touchRipple	boolean	true	在 Material 主題中啟用觸摸漣漪效果
value	any		單選按鈕輸入值
onChange	function(e)		當單選按鈕狀態變更時將觸發事件

單選按鈕列表

單選按鈕列表不是單獨的組件，而只是使用 List 和 ListItem 組件的特定情況。

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

範例

Radio.svelte

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

  let inlineValue = 'inline-1';
  let groupValue = 'Books';
  let mediaValue = 'Item 1';
</script>

<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={() => (inlineValue = '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={() => (inlineValue = '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">
      <Radio
        slot="media"
        component="div"
        value="Books"
        checked={groupValue === 'Books'}
        onChange={() => (groupValue = 'Books')}
      />
    </ListItem>
    <ListItem label title="Movies">
      <Radio
        slot="media"
        component="div"
        value="Movies"
        checked={groupValue === 'Movies'}
        onChange={() => (groupValue = 'Movies')}
      />
    </ListItem>
    <ListItem label title="Food">
      <Radio
        slot="media"
        component="div"
        value="Food"
        checked={groupValue === 'Food'}
        onChange={() => (groupValue = 'Food')}
      />
    </ListItem>
    <ListItem label title="Drinks">
      <Radio
        slot="media"
        component="div"
        value="Drinks"
        checked={groupValue === 'Drinks'}
        onChange={() => (groupValue = 'Drinks')}
      />
    </ListItem>
  </List>

  <List strongIos outlineIos>
    <ListItem label title="Books">
      <Radio
        slot="after"
        component="div"
        value="Books"
        checked={groupValue === 'Books'}
        onChange={() => (groupValue = 'Books')}
      />
    </ListItem>
    <ListItem label title="Movies">
      <Radio
        slot="after"
        component="div"
        value="Movies"
        checked={groupValue === 'Movies'}
        onChange={() => (groupValue = 'Movies')}
      />
    </ListItem>
    <ListItem label title="Food">
      <Radio
        slot="after"
        component="div"
        value="Food"
        checked={groupValue === 'Food'}
        onChange={() => (groupValue = 'Food')}
      />
    </ListItem>
    <ListItem label title="Drinks">
      <Radio
        slot="after"
        component="div"
        value="Drinks"
        checked={groupValue === 'Drinks'}
        onChange={() => (groupValue = 'Drinks')}
      />
    </ListItem>
  </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."
    >
      <Radio
        slot="media"
        component="div"
        checked={mediaValue === 'Item 1'}
        onChange={() => (mediaValue = 'Item 1')}
      />
    </ListItem>
    <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."
    >
      <Radio
        slot="media"
        component="div"
        checked={mediaValue === 'Item 2'}
        onChange={() => (mediaValue = 'Item 2')}
      />
    </ListItem>
  </List>
</Page>