タブ

概要

Avonni Tabs コンポーネントは、さまざまなコンテンツセクションを整理・表示するための構造化され直感的で視覚的に魅力的な方法を提供します。コンポーネントは多数の設定可能なプロパティを備えており、水平または垂直配置、スクロール可能、カスタムスタイルのタブを作成してサイトの美観とシームレスに調和させることができます。

このコンポーネントは スロットを活用します 高度なカスタマイズを可能にするため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。

チュートリアル

近日公開

設定

🎛️ プロパティ

名前	説明	使用法
向き	タブの向きを設定し、水平レイアウトまたは垂直レイアウトを選択します。	デザイン要件に最も適した向きを選択し、ユーザーのナビゲーションとコンテンツの可視性に合わせてレイアウトを最適化します。
スコープ付き	タブに対してより集中的かつ特定のスタイル適用を行うためにスコープ付きスタイリングを有効にします。	この機能を使用すると、コンポーネントに限定されたスタイルを適用でき、他のページ要素との意図しないスタイリングの競合を防げます。
スクロール可能 & スクロールボタン	タブをスクロール可能にし、スクロールボタンの表示を管理して、タブ数が多い場合でも簡単にナビゲートできるようにします。	タブの数やレイアウトに基づいてスクロール機能を構成し、ユーザーがすべての利用可能なタブに簡単にアクセスして移動できるようにします。
CMS コンテンツの背景画像またはコンテンツ背景画像の URL	CMS から画像を選択するか URL を指定して、タブコンテンツ領域の背景をカスタマイズします。	背景画像を適用してタブの視覚的魅力を高め、全体のデザインやコンテンツ表示に調和させます。
データソース	タブのラベルとコンテンツのソースを定義し、ラベル、アイコン、ツールチップなどのタブプロパティを手動で構成できるようにします。	この機能を活用してタブデータをカスタマイズし、各タブに正確なラベルを付け、必要に応じてアイコンやツールチップを追加します。

🎨 スタイリング

名前	説明
サイズ設定	タブの幅や高さを定義し、レイアウト内にシームレスに収まるようにします。
背景および境界線のスタイル	色やサイズなどのオプションで背景や境界線をカスタマイズし、各タブの視覚的な区別を高めます。
タブスタイル	垂直揃え、幅、高さ、間隔などのさまざまな点を調整して、タブの外観とレイアウトを洗練させます。
ラベルおよびサブタイトルのスタイル	タブ内のテキストの見た目を調整し、可読性と美観を高めるために色やフォントスタイルを適用します。
オーバーフローボタンのスタイル	オーバーフローボタンの外観をカスタマイズし、テキストや背景色を調整して視覚的一貫性を保ちます。