There are following components included:
Radio
Name | Type | Default | Description |
---|---|---|---|
checked | boolean | false | Defines whether the radio input is checked or not |
colors | object | Object with Tailwind CSS colors classes | |
colors.bgChecked | string | 'bg-primary' | Radio bg color when it is checked |
colors.borderChecked | string | 'border-primary' | Radio border color when it is checked |
colors.borderIos | string | 'border-black border-opacity-30 dark:border-white dark:border-opacity-30' | Radio border color in iOS theme |
colors.borderMaterial | string | 'border-black border-opacity-40 dark:border-white dark:border-opacity-40' | Radio border color in Material theme |
component | string | 'label' | Component's HTML Element |
defaultChecked | boolean | false | Defines whether the radio input is checked or not, for the case if it is uncontrolled component |
disabled | boolean | false | Defines whether the radio input is disabled |
name | string | Radio input name | |
readonly | boolean | false | Defines whether the radio input is readonly |
value | any | Radio input value |
Name | Type | Description |
---|---|---|
change | function(e) | Event will be triggered when radio state changed |
Radios List is not a separate component, but just a particular case of using List
and ListItem
components.
<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>
<template><k-page><k-navbar title="Radio" /><k-block-title>Inline</k-block-title><k-block strong><p>Lorem{{ ' ' }}<k-radioname="demo-radio-inline"value="inline-1":checked="inlineValue === 'inline-1'"@change="() => (inlineValue = 'inline-1')"/>{{ ' ' }} ipsum dolor sit amet, consectetur adipisicing elit. Aliasbeatae illo nihil aut eius commodi sint eveniet aliquid eligendi{{' '}}<k-radioname="demo-radio-inline"value="inline-2":checked="inlineValue === 'inline-2'"@change="() => (inlineValue = 'inline-2')"/>{{ ' ' }} ad delectus impedit tempore nemo, enim vel praesentiumconsequatur nulla mollitia!</p></k-block><k-block-title>Radio Group</k-block-title><k-list><k-list-item label title="Books"><template #media><k-radiocomponent="div"value="Books":checked="groupValue === 'Books'"@change="() => (groupValue = 'Books')"/></template></k-list-item><k-list-item label title="Movies"><template #media><k-radiocomponent="div"value="Movies":checked="groupValue === 'Movies'"@change="() => (groupValue = 'Movies')"/></template></k-list-item><k-list-item label title="Food"><template #media><k-radiocomponent="div"value="Food":checked="groupValue === 'Food'"@change="() => (groupValue = 'Food')"/></template></k-list-item><k-list-item label title="Drinks"><template #media><k-radiocomponent="div"value="Drinks":checked="groupValue === 'Drinks'"@change="() => (groupValue = 'Drinks')"/></template></k-list-item></k-list><k-list><k-list-item label title="Books"><template #after><k-radiocomponent="div"value="Books":checked="groupValue === 'Books'"@change="() => (groupValue = 'Books')"/></template></k-list-item><k-list-item label title="Movies"><template #after><k-radiocomponent="div"value="Movies":checked="groupValue === 'Movies'"@change="() => (groupValue = 'Movies')"/></template></k-list-item><k-list-item label title="Food"><template #after><k-radiocomponent="div"value="Food":checked="groupValue === 'Food'"@change="() => (groupValue = 'Food')"/></template></k-list-item><k-list-item label title="Drinks"><template #after><k-radiocomponent="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><k-list-itemlabeltitle="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-radiocomponent="div":checked="mediaValue === 'Item 1'"@change="() => (mediaValue = 'Item 1')"/></template></k-list-item><k-list-itemlabeltitle="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-radiocomponent="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>