区切り線

概要

Avonniのセパレーターコンポーネントは、Experience Cloudサイト内のコンテンツセクションを区切ります。異なるコンテンツ部分の間に明確でカスタマイズ可能な境界を提供することで、ウェブページの視覚的魅力と整理を向上させます。

設定

🎛️ プロパティ

名前	説明	使用法
タイトル	テキストはセパレーターの横に表示され、コンテキストや追加情報を提供します。	このプロパティを実装して、セパレーターが分割しているセクションにラベルを付け、ユーザーの理解を高めます。
アイコン名とアイコンサイズ	セパレーターにアイコンを組み込んで視覚的なコンテキストを追加できます。アイコンのサイズはデザインの美学に合わせて調整できます。	アイコンをタイトルを補完する視覚的手がかりとして、または次のコンテンツを示すために使用し、セパレーターの伝達機能に寄与させます。
コンテンツの配置	タイトルとアイコンのセパレーター線に対する配置を決定します。オプションには以下が含まれます 開始, 終了、または 中央.	レイアウトや強調の必要性に基づいてコンテンツを配置し、セパレーターがページの流れにシームレスに統合されるようにします。
向き	セパレーターの向きを次のように設定します 水平 または 垂直、コンテンツの分割方法に柔軟性を持たせます。	サイドバイサイドの比較か上下の区分かに応じて、コンテンツのレイアウトに最適な向きを選択してください。

🎨 スタイリング

名前	説明	使用法
タイトル	色、フォントサイズ、スタイル、ウェイトのオプションでタイトルの見た目をカスタマイズします。	サイト全体のデザインスキームと整合させつつ、タイトルが適切に目立つようにスタイルを設定してください。
アイコン	背景色、前景色、前景色のデフォルト状態、角を丸めるためのアイコン半径などでアイコンのスタイルを設定します。	アイコンの外観を微調整して、デザイン目的に合わせてより目立たせるか控えめにします。
ボーダー	サイズ、色、スタイル（実線、破線、点線など）を設定してセパレーターの境界線を定義します。	境界線の設定を調整し、はっきりしたラインからより微妙な区切りまで、コンテンツセクション間の望ましい区別レベルを作り出します。