Radio Vue 元件

Radio 元件
Radio 屬性
Radio 事件
Radio 清單
範例

Radio 元件

包含以下元件

單選

Radio 屬性

名稱	類型	預設值	描述
checked	布林值	false	定義單選輸入是否被選取
colors	物件		包含 Tailwind CSS 顏色類別的物件
colors.bgCheckedIos	字串	'bg-primary'
colors.bgCheckedMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIos	字串	'border-primary'
colors.borderCheckedMaterial	字串	'border-md-light-primary dark:border-md-dark-primary'
colors.borderIos	字串	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
component	字串	'label'	元件的 HTML 元素
defaultChecked	布林值	false	定義單選輸入是否被選取，用於非受控元件的情況
disabled	布林值	false	定義單選輸入是否被禁用
name	字串		單選輸入名稱
readonly	布林值	false	定義單選輸入是否為唯讀
touchRipple	布林值	true	在 Material 主題中啟用觸摸波紋效果
value	任何		單選輸入值

Radio 事件

名稱	類型	描述
change	function(e)	當單選狀態變更時觸發事件

Radio 清單

Radio 清單不是一個單獨的元件，而只是使用 List 和 ListItem 元件的一個特例。

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

範例

Radio.vue

<template>
  <k-page>
    <k-navbar title="Radio" />

    <k-block-title>Inline</k-block-title>
    <k-block strong-ios outline-ios>
      <p>
        Lorem{{ ' ' }}
        <k-radio
          name="demo-radio-inline"
          value="inline-1"
          :checked="inlineValue === 'inline-1'"
          @change="() => (inlineValue = 'inline-1')"
        />{{ ' ' }} ipsum dolor sit amet, consectetur adipisicing elit. Alias
        beatae illo nihil aut eius commodi sint eveniet aliquid eligendi{{
          ' '
        }}
        <k-radio
          name="demo-radio-inline"
          value="inline-2"
          :checked="inlineValue === 'inline-2'"
          @change="() => (inlineValue = 'inline-2')"
        />{{ ' ' }} ad delectus impedit tempore nemo, enim vel praesentium
        consequatur nulla mollitia!
      </p>
    </k-block>

    <k-block-title>Radio Group</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item label title="Books">
        <template #media>
          <k-radio
            component="div"
            value="Books"
            :checked="groupValue === 'Books'"
            @change="() => (groupValue = 'Books')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Movies">
        <template #media>
          <k-radio
            component="div"
            value="Movies"
            :checked="groupValue === 'Movies'"
            @change="() => (groupValue = 'Movies')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Food">
        <template #media>
          <k-radio
            component="div"
            value="Food"
            :checked="groupValue === 'Food'"
            @change="() => (groupValue = 'Food')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Drinks">
        <template #media>
          <k-radio
            component="div"
            value="Drinks"
            :checked="groupValue === 'Drinks'"
            @change="() => (groupValue = 'Drinks')"
          />
        </template>
      </k-list-item>
    </k-list>

    <k-list strong-ios outline-ios>
      <k-list-item label title="Books">
        <template #after>
          <k-radio
            component="div"
            value="Books"
            :checked="groupValue === 'Books'"
            @change="() => (groupValue = 'Books')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Movies">
        <template #after>
          <k-radio
            component="div"
            value="Movies"
            :checked="groupValue === 'Movies'"
            @change="() => (groupValue = 'Movies')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Food">
        <template #after>
          <k-radio
            component="div"
            value="Food"
            :checked="groupValue === 'Food'"
            @change="() => (groupValue = 'Food')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Drinks">
        <template #after>
          <k-radio
            component="div"
            value="Drinks"
            :checked="groupValue === 'Drinks'"
            @change="() => (groupValue = 'Drinks')"
          />
        </template>
      </k-list-item>
    </k-list>

    <k-block-title>With Media Lists</k-block-title>
    <k-list strong-ios outline-ios>
      <k-list-item
        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."
      >
        <template #media>
          <k-radio
            component="div"
            :checked="mediaValue === 'Item 1'"
            @change="() => (mediaValue = 'Item 1')"
          />
        </template>
      </k-list-item>
      <k-list-item
        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."
      >
        <template #media>
          <k-radio
            component="div"
            :checked="mediaValue === 'Item 2'"
            @change="() => (mediaValue = 'Item 2')"
          />
        </template>
      </k-list-item>
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kRadio,
    kBlockTitle,
    kBlock,
    kList,
    kListItem,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kRadio,
      kBlockTitle,
      kBlock,
      kList,
      kListItem,
    },
    setup() {
      const inlineValue = ref('inline-1');
      const groupValue = ref('Books');
      const mediaValue = ref('Item 1');

      return {
        inlineValue,
        groupValue,
        mediaValue,
      };
    },
  };
</script>