グリッドレイアウトの作成

概要

このチュートリアルでは、利用可能なさまざまなコンポーネントを使用して、動的で見栄えの良いグリッドレイアウトを作成する方法を案内します。グリッドレイアウトは、機能、製品、またはソリューションをそれぞれ専用の「詳細を見る」ボタン付きで紹介するのに最適です。

では、 Avonni Layout, Avonni コンテナー, Avonni Icon、Text Block、そして Avonni Button コンポーネントを使用します。

これらのコンポーネントを使用する理由

1. Avonni Layout: これが、私たちのグリッドレイアウトの基盤です。コンテンツを整理されたグリッドベースの形式に構造化できるため、ユーザーがさまざまな項目をより簡単に操作できます。
2. Avonni Container: グリッド内の各項目は Avonni Container 内にまとめられます。これにより、異なる製品や機能を区切り、それぞれの項目にすっきりと独立したスペースを提供できます。
3. Avonni Icon: アイコンは、機能や製品を視覚的に表現するのに最適な方法です。コンテンツにグラフィカルな要素を加えることで、より魅力的で理解しやすくなります。
4. Text Block: ここに、各機能や製品の説明文を追加します。テキストブロックコンポーネントを使用すると、明確で簡潔な情報を提供できます。
5. Avonni Button: グリッド内の各項目の下にある「詳細を見る」ボタンは、ユーザーを追加情報へ導きます。この行動喚起によりユーザーの関与が高まり、より詳細なコンテンツを提供できます。

最終結果

インタラクティブなステップバイステップ設定ガイド