ラジオ 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>