Grid グリッド - Vant 4
Grid グリッド
🏢 紹介
Grid グリッドはスマートな収納ボックスのようなものです！✨ ページを均等な幅の小さなグリッドに整然と分割し、コンテンツの表示を整理整頓します。アプリのホームページの機能エントリー、ECサイトの商品表示、カテゴリーナビゲーションの整列など、Grid を使えばページが瞬時にプロフェッショナルで美しくなります！積み木を組むように簡単で、無限の可能性のあるレイアウト効果を作り出すことができます！🎯
📦 導入
以下の方法でコンポーネントをグローバルに登録します。詳細な登録方法については、コンポーネント登録を参照してください。
import { createApp } from'vue'; import { Grid, GridItem } from'vant'; const app = createApp(); app.use(Grid); app.use(GridItem);🎯 コードデモ
🎯 基本的な使い方
最もシンプルなグリッドの魔法！✨ icon 属性で各グリッドに美しいアイコンを追加し、text 属性で説明テキストを追加します。各小部屋にラベルを貼るように、ユーザーは一見して各グリッドの用途を理解できます！シンプルで明確で、見た目も実用性も兼ね備えています！🏠
🔢 列数のカスタマイズ
レイアウトの自由度が最大！🎨 デフォルトでは一行に4つのグリッドが表示されますが、column-num 属性で自由に列数を調整できます。よりコンパクトにしたいですか？5列に設定しましょう！よりゆったりとしたレイアウトが欲しいですか？3列に設定しましょう！デザインニーズに応じて決めることができ、各ページに独特なリズムを与えることができます！
🎭 コンテンツのカスタマイズ
創造性を無限に発揮できるステージ！✨ スロット機能を使えば、各グリッドに好きなコンテンツを自由に配置できます。シンプルなアイコンやテキストに限定されず、画像、ボタン、小さなコンポーネント...何でも可能です！各グリッドに魔法の箱を装備したように、何でも入れることができます！🎪
⬜ 正方形グリッド
完璧な幾何学的美学！📐 square 属性を設定すると、各グリッドが標準的な正方形になり、高さと幅が完全に一致します。丁寧にカットされたタイルのように整然と並び、強迫性障害の人でも満足できる視覚的な喜びを提供します！特にアイコンの表示や対称的なレイアウトに最適です！
📏 グリッド間隔
グリッドたちに呼吸のスペースを与えましょう！🌬️ gutter 属性でグリッド間の距離を精密に制御できます。コンパクトな感じを出したいですか？間隔を小さく設定しましょう。開放的なレイアウトで通気性を高めたいですか？間隔を大きくすれば完璧です！部屋の家具の配置間隔を調整するように、適切な間隔で全体のレイアウトをより快適にすることができます！
↔️ コンテンツの横並び
世界を見る角度を変えよう！🔄 direction 属性を horizontal に設定すると、グリッド内のアイコンとテキストが上下配置から左右配置に変わります。縦型の名刺を横型に変えるように、ユーザーに異なる視覚体験をもたらします。特にテキストが長い場合や、横方向の流動感を演出したい場面に最適です！
🧭 ページナビゲーション
各グリッドをポータルにしましょう！🚀 to 属性で Vue Router のルート遷移を設定し、アプリ内でのシームレスなナビゲーションを実現します。url 属性で外部リンクの遷移を設定し、ユーザーをどこでも連れて行くことができます。各グリッドにナビゲーションシステムを搭載したように、一クリックで目的地に到達し、ユーザーエクスペリエンスが非常にスムーズです！
🔴 バッジの表示
小さな細部が大きな効果を！✨ dot 属性を設定すると、アイコンの右上に目立つ小さな赤い点が表示され、携帯アプリの未読メッセージ通知のようになります。badge 属性を設定すると、具体的な数字やテキストのバッジを表示できます。これらの小さな視覚的なヒントは、ユーザーの注意を効果的に引き、重要な情報が見落とされないようにします！🎯
API
Grid Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| column-num | 列数 | number | string | 4 |
| icon-size | アイコンのサイズ、デフォルトの単位はpx | number | string | 28px |
| gutter | グリッド間の間隔、デフォルトの単位はpx | number | string | 0 |
| border | ボーダーを表示するかどうか | boolean | true |
| center | グリッドの内容を中央に表示するかどうか | boolean | true |
| square | グリッドを正方形に固定するかどうか | boolean | false |
| clickable | グリッドのクリックフィードバックを有効にするかどうか | boolean | false |
| direction | グリッド内のコンテンツの配置方向、horizontal が使用可能 | string | vertical |
| reverse | アイコンとテキストの位置を入れ替えるかどうか | boolean | false |
GridItem Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| text | テキスト | string | - |
| icon | アイコン名または画像のリンク、Icon コンポーネントの name 属性 と同じ | string | - |
| icon-prefix | アイコンのクラスプレフィックス、Icon コンポーネントの class-prefix 属性 と同じ | string | van-icon |
| icon-color | アイコンの色、Icon コンポーネントの color 属性 と同じ | string | - |
| dot | アイコンの右上に赤い点を表示するかどうか | boolean | false |
| badge | アイコンの右上のバッジの内容 | number | string | - |
| badge-props | バッジのカスタムプロパティ、渡されたオブジェクトは Badge コンポーネントの props に渡されます | BadgeProps | - |
| url | クリック時に遷移するリンク先 | string | - |
| to | クリック時に遷移するルートオブジェクト、Vue Router の to 属性 と同じ | string | object | - |
| replace | 遷移時に現在のページ履歴を置き換えるかどうか | boolean | false |
GridItem Events
| イベント名 | 説明 | コールバックパラメータ |
|---|---|---|
| click | グリッドをクリックしたときにトリガーされます | event: MouseEvent |
GridItem Slots
| 名前 | 説明 |
|---|---|
| default | グリッドのすべてのコンテンツをカスタマイズ |
| icon | アイコンをカスタマイズ |
| text | テキストをカスタマイズ |
型定義
コンポーネントは以下の型定義をエクスポートします：
importtype { GridProps, GridDirection, GridItemProps } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については、ConfigProvider コンポーネントを参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-grid-item-content-padding | var(--van-padding-md) var(--van-padding-xs) | - |
| --van-grid-item-content-background | var(--van-background-2) | - |
| --van-grid-item-content-active-color | var(--van-active-color) | - |
| --van-grid-item-icon-size | 28px | - |
| --van-grid-item-text-color | var(--van-text-color) | - |
| --van-grid-item-text-font-size | var(--van-font-size-sm) | - |
📚 関連文書
Grid グリッドはこれらのコンポーネントと組み合わせて使用することで、より豊富なページレイアウト体験を作り出すことができます：
- Icon アイコン - Grid グリッドの視覚的な中核で、各エントリーに専属の識別マークを付けます 🎨
- Badge バッジ - グリッド右上の小さなヒントで、重要な情報を見逃しません 🔴
- Button ボタン - グリッドに配置できるインタラクティブ要素で、操作体験を向上させます 🔘
- Image 画像 - カスタムコンテンツの良き相棒で、グリッドをより多彩にします 🖼️
- Cell セル - 別のリストレイアウトの選択肢で、より詳細な情報表示に適しています 📋
- List リスト - 垂直レイアウトの完璧なパートナーで、様々な場面のレイアウト選択肢 📝
- Tab タブ - ページナビゲーションの別の形式で、Grid と相補的な関係にあります 📑
- NavBar ナビゲーションバー - ページ上部のナビゲーションで、Grid と組み合わせて完全なナビゲーションシステムを構築 🧭
- Tabbar タブバー - 下部のナビゲーションバーで、Grid と上下に呼応します 📱
- ActionSheet アクションシート - グリッドをクリックした後の操作選択パネル 📋