🔥 新しいプロジェクトのご紹介 t0ggles - あなたのための究極のプロジェクト管理ツール！ 🔥

ラジオ Vue コンポーネント

ラジオコンポーネント

以下のコンポーネントが含まれています。

  • ラジオボタン

ラジオプロパティ

名前型デフォルト説明
checkedbooleanfalse

ラジオ入力のオン/オフを定義します。

colorsobject

Tailwind CSSカラークラスを持つオブジェクト

colors.bgCheckedIosstring'bg-primary'
colors.bgCheckedMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
colors.borderCheckedIosstring'border-primary'
colors.borderCheckedMaterialstring'border-md-light-primary dark:border-md-dark-primary'
colors.borderIosstring'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.borderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
componentstring'label'

コンポーネントのHTML要素

defaultCheckedbooleanfalse

非制御コンポーネントの場合のラジオ入力のオン/オフを定義します。

disabledbooleanfalse

ラジオ入力が無効かどうかを定義します。

namestring

ラジオ入力の名前

readonlybooleanfalse

ラジオ入力が読み取り専用かどうかを定義します。

touchRipplebooleantrue

Materialテーマでタッチリップル効果を有効にします。

valueany

ラジオ入力の値

ラジオイベント

名前型説明
changefunction(e)

ラジオの状態が変更されたときにトリガーされるイベント

ラジオリスト

ラジオリストは個別のコンポーネントではなく、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>
ライセンス MIT.
2022 © Konsta UI by nolimits4web.