🔥 新しいプロジェクトのご紹介 t0ggles -究極のプロジェクト管理ツール！ 🔥
セグメントコントロール Vue コンポーネント
セグメントコントロールは、相互に排他的なボタンとして機能する2つ以上のセグメント（ボタン）の線形セットです。コントロール内では、すべてのボタンの幅は均一です。セグメントコントロールは、異なるビューを表示する（タブを切り替える）ために頻繁に使用されます。
セグメントコンポーネント
以下のコンポーネントが含まれています。
Segmented- ボタン用のセグメントラッパーSegmentedButton- 単一のセグメントボタン
セグメントプロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| colors | オブジェクト | Tailwind CSS カラークラスを持つオブジェクト | |
| colors.borderIos | 文字列 | 'border-primary' | |
| colors.borderMaterial | 文字列 | 'border-md-light-outline dark:border-md-dark-outline' | |
| colors.divideIos | 文字列 | 'divide-primary' | |
| colors.divideMaterial | 文字列 | 'divide-md-light-outline dark:divide-md-dark-outline' | |
| colors.strongBgIos | 文字列 | 'bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-10' | |
| colors.strongBgMaterial | 文字列 | 'bg-md-light-surface-variant dark:bg-md-dark-surface-variant' | |
| component | 文字列 | 'div' | コンポーネントのHTML要素 |
| outline | ブール値 | false | セグメントアウトラインを作成します |
| raised | ブール値 | false | セグメントを立体的にします |
| rounded | ブール値 | false | セグメントを丸くします |
| strong | ブール値 | false | セグメントを強調表示します |
SegmentedButton プロパティ
SegmentedButton コンポーネントはButton コンポーネントを拡張し、すべてのButton プロパティと以下の追加プロパティをサポートしています。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| active | ブール値 | false | ボタンをアクティブとして強調表示します |
| component | 文字列 | 'button' | コンポーネントのHTML要素 |
| rounded | ブール値 | false | セグメントボタンを丸くします ( |
| strong | ブール値 | false | セグメントボタンを強調表示します ( |
例
<template><k-page><k-navbar title="Segmented Control" /><k-block-title>Default Segmented</k-block-title><k-block strong-ios outline-ios class="space-y-4"><k-segmented><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented rounded><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block><k-block-title>Raised Segmented</k-block-title><k-block strong-ios outline-ios class="space-y-4"><k-segmented raised><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented raised rounded><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block><k-block-title>Outline</k-block-title><k-block strong-ios outline-ios class="space-y-4"><k-segmented outline><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented rounded outline><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block><k-block-title>Strong Segmented</k-block-title><k-block strong-ios outline-ios class="space-y-4"><k-segmented strong><k-segmented-buttonstrong:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-buttonstrong:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-buttonstrong:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented strong rounded><k-segmented-buttonstrongrounded:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-buttonstrongrounded:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-buttonstrongrounded:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block></k-page></template><script>import { ref } from 'vue';import {kPage,kNavbar,kNavbarBackLink,kSegmented,kSegmentedButton,kBlock,kBlockTitle,} from 'konsta/vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kSegmented,kSegmentedButton,kBlock,kBlockTitle,},setup() {const activeSegmented = ref(1);return {activeSegmented,};},};</script>
ライセンス MIT.
2022 © Konsta UI by 
.
.