YouTube ChannelSchedule a CallSubscribe for Updates

スタイル

Avonni Dynamic Components は豊富なスタイリングオプションを提供し、コンポーネントの外観をブランドに合わせてカスタマイズし、洗練されたユーザー体験を作成できます。 スタイルパネル は、これらのスタイルを管理するための中央ハブです。

概要

すべての Avonni コンポーネントには、基本的な外観を定義するデフォルトスタイルのセットがあります。これらのスタイルは次の2つの方法でカスタマイズできます:

  • コンポーネント固有のスタイリング（デフォルトスタイルセレクター）： のスタイルを変更して、 単一の特定のコンポーネントインスタンスを調整します。これらの変更は のみ その1つのコンポーネントに影響します。

  • 再利用可能なカスタムスタイル： 名前付きの カスタムスタイルセレクター を作成し、スタイル属性のセットを定義します。その後、 適用 して、これらのカスタムスタイルを複数のコンポーネントに適用でき、一貫性を確保しつつグローバルにスタイルを簡単に更新できます。

スタイルパネルの場所

スタイルタブ

Avonni コンポーネントを選択すると、スタイルタブはコンポーネントビルダーの右側に表示されます。含まれる内容は次のとおりです：

  • スタイル属性： コンポーネントの外観（例：色、フォント、余白）を変更するためにカスタマイズできる属性の一覧。

  • スタイルセレクター： コンポーネントにカスタム CSS クラスを作成・適用できるメニュー。

コンポーネント固有のスタイリング（デフォルトスタイル）

コンポーネントをキャンバスに追加すると、「Default」スタイルが使用されます。スタイル属性（例：色、フォントサイズ、パディング）を変更すると、 「Default」スタイルが選択されている間、それらの変更は のみ その 特定のインスタンス のコンポーネントに影響します。

例

  1. ボタンコンポーネントを追加します。

  2. ボタンコンポーネントを選択します。

  3. スタイルパネルで「Default」が選択されていることを確認します。

  4. プロパティパネルでボタンの背景色を赤に変更します。

  5. その特定のボタンのみ が赤い背景になります。他のボタンコンポーネントはデフォルトの外観を維持します。

これは一度限りのカスタマイズに有用です。

再利用可能なカスタムスタイルの作成と使用

複数のコンポーネントに適用できる再利用可能なスタイルを作成するには：

  1. コンポーネントを選択： 選択： 任意の キャンバス上のコンポーネントを1つ選択します。最初にどのコンポーネントを選んでも構いません。

  2. スタイルパネルを開く： スタイルパネルへ移動します。

  3. 新しいスタイルを作成するには

    1. スタイルセレクターへ移動： これはコンポーネントビルダーのスタイルタブにあります。

    2. スタイルに名前を付ける： 目的が分かる明確な名前を付けます（例：RedMetric、PrimaryButton）。

    3. スタイルを作成： をクリックして、 + 「[styleName]」を作成 ボタンをクリックしてカスタム CSS クラスを生成します。

  4. スタイル属性をカスタマイズ

    • あなたの 新しいカスタムスタイル がスタイルパネルで選択（ハイライト）されている状態で、 プロパティパネル を使用して、のスタイル属性を変更します 現在選択されているコンポーネント。例えば、背景色、フォントサイズ、ボーダー、パディングなどを変更できます。

    • 重要： ここで行う変更は、 カスタムスタイルに保存され、最初に選択した個々のコンポーネントだけではありません。

  5. スタイルを他のコンポーネントに適用

    • キャンバス上で別のコンポーネント（ 同じ種類 、つまりスタイルを作成するために使用したコンポーネントと同タイプのもの）を選択します。ボタンのスタイルは別のボタンには適用できますが、データテーブルには適用できません。

    • スタイルパネルに、あなたのカスタムスタイルが一覧表示されます。

    • プロパティパネルの Style 属性をクリック

    • 選択したコンポーネントに適用するため、カスタムスタイルを選択します。

  6. 適用済みスタイルを確認

    • スタイルパネルから、スタイルを使用しているコンポーネントを直接可視化することもできます。

これで、 すべての そのカスタムスタイルを適用したコンポーネントは同じ外観を共有します。後でカスタムスタイルを編集すると、 すべての そのスタイルを使用しているコンポーネントは自動的に更新されます。

例：再利用可能な「RedMetric」スタイル

  1. キャンバスに Metric コンポーネントを追加します。

  2. スタイルパネルを開きます。

  3. 新しいスタイルを作成するために「+」（または「New Style」）ボタンをクリックします。

  4. スタイルに名前を付けます： RedMetric.

  5. 作成した RedMetric スタイルを 選択した状態で スタイルパネル内で、Metric コンポーネントを選択します。

  6. Metric コンポーネントの背景色を赤に変更します（プロパティパネルを使用）。

  7. キャンバスに別の Metric コンポーネントを追加します。

  8. このコンポーネントをクリックし、次に Style 属性を選択します。

  9. あなたのカスタム RedMetric スタイルを選択します。

これで、両方の Metric コンポーネントが赤い背景になります。後で RedMetric スタイル（スタイルパネル内）で定義された背景色を変更すると、 両方の Metric コンポーネントが自動的に更新されます。

重要な考慮事項

  • スタイルのスコープ： 現在、カスタムスタイルのスコープは、それらが作成された 個別の Dynamic Component に限定されます。異なる Dynamic Component 間では共有されません。 ただし、今後のリリースでコンポーネント間のスタイル共有を導入する予定です。

  • コンポーネントタイプの互換性： カスタムスタイルは、 同じ種類 に使用したコンポーネントと 同じ種類でスタイルを 作成

  • スタイルの上書き： 特定のコンポーネントで 上書き することができます。「Default」スタイルを選択した状態でさらに変更を加えることで、コンポーネント固有の上書きが作成されます。

  • スタイルの削除： スタイルパネルでカスタムスタイルを削除できます。これはそのスタイルを使用しているすべてのコンポーネントに影響するため注意してください。

  • スタイルの命名： カスタムスタイルを分かりやすく整理するために、シンプルで分かりやすい命名規則を使用してください。

チュートリアル

セクションやフィールドの間にスペースや改行を追加するには？

まとめ

Avonni コンポーネントのカスタムスタイルは、同じタイプの他のコンポーネントに簡単に追加・適用できます。あなたのスタイルを使用しているコンポーネントを簡単に可視化することもできます

最終更新

役に立ちましたか？