グリッドレイアウトを作成する

概要

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

次のものを使用します： Avonni レイアウト, Avonni コンテナ, Avonni アイコン、テキストブロック、および Avonni ボタン コンポーネント。

なぜこれらのコンポーネントを使用するのか？

1. Avonni レイアウト： これはグリッドレイアウトの基盤です。コンテンツを整理されたグリッド形式に構成でき、ユーザーがさまざまな項目をより簡単にナビゲートできるようになります。

2. Avonni コンテナ： グリッドの各項目は Avonni コンテナで囲まれます。これにより、異なる製品や機能を区切り、各項目に対してクリーンで独立したスペースを提供します。

3. Avonni アイコン： アイコンは機能や製品を視覚的に表現するのに優れています。コンテンツに図的要素を加え、より魅力的で理解しやすくします。

4. テキストブロック： ここに各機能や製品の説明文を追加します。テキストブロックコンポーネントは、明確で簡潔な情報提供を可能にします。

5. Avonni ボタン： グリッド内の各項目の下にある「詳細を見る」ボタンは、ユーザーを追加情報へ誘導します。このコールトゥアクションはユーザーの関与を促し、より詳細なコンテンツを提供します。

最終結果

対話型ステップバイステップ構成ガイド