Cell セル - Vant 4

基本的なセルで、タイトル、説明、アイコンなどの情報を表示できます

導入

import { Cell, CellGroup } from 'vant';

app.use(Cell);
app.use(CellGroup);

コード例

基本的な使い方

Cell コンポーネントは単独で使用するか、複数の Cell を CellGroup でラップして使用することができます。

<van-cell-group>
  <van-cell title="セルタイトル" value="内容" />
  <van-cell title="セルタイトル" value="内容" label="説明情報" />
</van-cell-group>

カードスタイル

CellGroup コンポーネントに inset 属性を設定すると、カードスタイルのセルになります。

<van-cell-group inset>
  <van-cell title="セルタイトル" value="内容" />
  <van-cell title="セルタイトル" value="内容" label="説明情報" />
</van-cell-group>

セルサイズ

size 属性でセルのサイズを設定します。

<van-cell-group>
  <van-cell title="通常サイズ" value="内容" />
  <van-cell title="大サイズ" value="内容" size="large" />
</van-cell-group>

アイコンの表示

icon 属性で左側にアイコンを表示します。

<van-cell-group>
  <van-cell title="セルタイトル" icon="location-o" />
  <van-cell title="セルタイトル" icon="link-o" />
  <van-cell title="セルタイトル" icon="shop-o" />
</van-cell-group>

矢印の表示

is-link 属性を設定すると、右側に矢印が表示され、arrow-direction 属性で矢印の方向を設定できます。

<van-cell-group>
  <van-cell title="セルタイトル" is-link />
  <van-cell title="セルタイトル" is-link value="内容" />
  <van-cell title="セルタイトル" is-link arrow-direction="down" value="内容" />
</van-cell-group>

ページナビゲーション

url 属性でページ遷移先を指定したり、to 属性で Vue Router のルートを指定することができます。

<van-cell-group>
  <!-- URLで遷移 -->
  <van-cell title="URL遷移" is-link url="/vue" />
  <!-- Vue Routerで遷移 -->
  <van-cell title="Vue Router遷移" is-link to="/about" />
</van-cell-group>

グループタイトル

CellGroup コンポーネントに title 属性を設定すると、グループのタイトルを表示できます。

<van-cell-group title="グループタイトル">
  <van-cell title="セルタイトル" value="内容" />
</van-cell-group>

<van-cell-group title="グループタイトル" inset>
  <van-cell title="セルタイトル" value="内容" />
</van-cell-group>

スロットの使用

カスタムコンテンツを表示するためにスロットを使用します。

<van-cell-group>
  <van-cell title="セルタイトル" icon="shop-o">
    <template #right-icon>
      <van-icon name="passed" class="van-cell__right-icon" />
    </template>
  </van-cell>
  <van-cell title="セルタイトル">
    <template #value>
      <van-tag type="danger">カスタム内容</van-tag>
    </template>
  </van-cell>
  <van-cell>
    <template #title>
      <span class="custom-title">セルタイトル</span>
    </template>
    カスタム内容
  </van-cell>
</van-cell-group>

垂直中央揃え

center 属性を設定すると、セルの内容が垂直方向に中央揃えになります。

<van-cell-group>
  <van-cell title="セルタイトル" value="内容" center />
  <van-cell title="セルタイトル" value="内容" label="説明情報" center />
</van-cell-group>

API

CellGroup Props

パラメータ	説明	型	デフォルト値
title	グループのタイトル	string	-
inset	カードスタイルかどうか	boolean	false
border	セルの間に区切り線を表示するかどうか	boolean	true

Cell Props

パラメータ	説明	型	デフォルト値
title	セルのタイトル	string	-
value	セルの内容	string	-
label	サブタイトル（小さい文字で表示）	string	-
size	セルのサイズ、large または default	string	default
icon	左側のアイコン名またはカスタムアイコンコンポーネント	string | Component	-
icon-prefix	アイコンのプレフィックス	string	van-icon
border	下側の区切り線を表示するかどうか	boolean	true
center	内容を垂直方向に中央揃えにするかどうか	boolean	false
is-link	右側に矢印を表示するかどうか	boolean	false
required	左側に必須マークを表示するかどうか	boolean	false
clickable	クリック可能かどうか	boolean	false
url	リンクのURL	string	-
to	Vue Routerのリンクオブジェクト	string | object	-
replace	Vue Routerのreplaceモードを使用するかどうか	boolean	false
arrow-direction	矢印の方向、left、up、down または right	string	right
title-style	タイトルのカスタムスタイル	string | object	-
value-style	内容のカスタムスタイル	string | object	-
label-style	サブタイトルのカスタムスタイル	string | object	-
use-slots	是否使用 title slot	boolean	-

Cell Events

イベント名	説明	コールバックパラメータ
click	セルをクリックしたときにトリガーされます	event: MouseEvent
touchstart	セルをタッチしたときにトリガーされます	event: TouchEvent

CellGroup Slots

名前	説明
default	セルの内容
title	グループのタイトル

Cell Slots

名前	説明
default	セルの内容、value 属性より優先されます
title	セルのタイトル、title 属性より優先されます
label	セルのサブタイトル、label 属性より優先されます
icon	カスタムアイコン
right-icon	右側のカスタムアイコン

タイプ定義

コンポーネントは次のTypeScriptタイプをエクスポートしています：

export type CellSize = 'default' | 'large';
export type CellArrowDirection = 'left' | 'up' | 'right' | 'down';

テーマカスタマイズ

CSS変数

以下のCSS変数を使用して、コンポーネントのスタイルをカスタマイズできます。カスタマイズ方法については、テーマカスタマイズガイドを参照してください。

変数名	デフォルト値	説明
--van-cell-font-size	var(--van-font-size-md)	-
--van-cell-line-height	20px	-
--van-cell-height	50px	-
--van-cell-background	var(--van-background)	-
--van-cell-title-color	var(--van-text-color)	-
--van-cell-value-color	var(--van-text-color-2)	-
--van-cell-label-color	var(--van-text-color-2)	-
--van-cell-label-font-size	var(--van-font-size-sm)	-
--van-cell-label-line-height	var(--van-line-height-sm)	-
--van-cell-label-margin-top	var(--van-padding-base)	-
--van-cell-value-color	var(--van-text-color-2)	-
--van-cell-value-font-size	inherit	-
--van-cell-icon-size	16px	-
--van-cell-right-icon-color	var(--van-gray-6)	-
--van-cell-large-vertical-padding	var(--van-padding-sm)	-
--van-cell-large-title-font-size	var(--van-font-size-lg)	-
--van-cell-large-label-font-size	var(--van-font-size-md)	-
--van-cell-large-value-font-size	inherit	-
--van-cell-group-background	var(--van-background-2)	-
--van-cell-group-title-color	var(--van-text-color-2)	-
--van-cell-group-title-padding	var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)	-
--van-cell-group-title-font-size	var(--van-font-size-md)	-
--van-cell-group-title-line-height	16px	-
--van-cell-group-inset-padding	0 var(--van-padding-md)	-
--van-cell-group-inset-radius	var(--van-radius-lg)	-
--van-cell-group-inset-title-padding	var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)	-

ベストプラクティス

情報階層設計

合理的な情報階層により、ユーザーは重要な情報をすばやく取得できます 📋。以下の原則に従うことを推奨します：

<!-- ✅ 推奨：明確な情報階層 -->
<van-cell-group title="個人情報">
  <van-cell title="氏名" value="張三" />
  <van-cell title="電話番号" value="138****8888" label="認証済み" />
  <van-cell title="メール" value="zhangsan@example.com" label="未認証" />
</van-cell-group>

<!-- ❌ 避ける：情報が長すぎる -->
<van-cell title="これは非常に長いタイトルで、ユーザー体験とインターフェースの見栄えに影響する可能性があります" />

インタラクション状態設計

明確なインタラクションのフィードバックによりユーザー体験が向上します ✨：

<!-- ✅ 推奨：明確なインタラクションのフィードバック -->
<van-cell title="設定" is-link />
<van-cell title="ヘルプセンター" is-link url="/help" />
<van-cell title="ログアウト" @click="logout" />

<!-- ✅ 推奨：アイコンの適切な使用 -->
<van-cell title="メッセージ通知" icon="bell-o" is-link />
<van-cell title="プライバシー設定" icon="shield-o" is-link />

パフォーマンス最適化のヒント

長いリストの最適化

大量の Cell を含む長いリストについては、仮想スクロール技術と組み合わせることを推奨します：

<!-- 非常に長いリストについては、List コンポーネントと組み合わせることを推奨 -->
<van-list v-model:loading="loading" @load="onLoad">
  <van-cell-group v-for="group in dataList" :key="group.id">
    <van-cell 
      v-for="item in group.items" 
      :key="item.id"
      :title="item.title"
      :value="item.value"
    />
  </van-cell-group>
</van-list>

イベント処理の最適化

イベント委任を使用してメモリ使用量を減らします：

// ✅ 推奨：イベント委任を使用
const handleCellClick = (item) => {
  // クリックイベントをまとめて処理
  router.push(`/detail/${item.id}`);
};

// ❌ 避ける：各 Cell に独立したイベントハンドラをバインド

デザインの推奨事項

視覚的階層

• タイトル：簡潔明瞭なテキストを使用し、長すぎないように 📝
• 説明：必要な追加情報を提供し、小さいフォントサイズを使用 📄
• アイコン：意味が明確なアイコンを選択し、スタイルを統一 🎨
• 間隔：size 属性を適切に使用して情報密度を制御 📏

インタラクションフィードバック

• クリック可能な Cell には is-link 属性を設定する必要があります 👆
• 重要な操作には異なる矢印方向でヒントを与えることができます ➡️
• ビジュアルバランスを維持するために、center 属性を適切に使用します ⚖️

よくある質問と解決策

Q: Cell の条件付きレンダリングを実装するには？

<van-cell-group>
  <van-cell 
    v-if="user.isVip" 
    title="VIP特典" 
    icon="diamond-o" 
    is-link 
  />
  <van-cell title="通常機能" is-link />
</van-cell-group>

Q: Cell の右側の内容をカスタマイズするには？

<van-cell title="右側をカスタマイズ">
  <template #right-icon>
    <van-switch v-model="checked" />
  </template>
</van-cell>

Q: Cell の動的スタイルを実装するには？

<van-cell 
  :title="item.title"
  :class="{ 'highlight': item.isImportant }"
/>

<style>
.highlight {
  background-color: #fff7e6;
  border-left: 3px solid #ff9500;
}
</style>

Q: 長いテキストコンテンツを処理するには？

<!-- 詳細情報を表示するには label を使用 -->
<van-cell 
  title="商品名"
  value="iPhone 14 Pro Max"
  label="スペースグレー 256GB 5G対応"
/>

<!-- またはスロットを使用してレイアウトをカスタマイズ -->
<van-cell title="説明">
  <template #value>
    <div class="multi-line-text">
      これは長い説明文...
    </div>
  </template>
</van-cell>

関連コンポーネント

• List リスト - 長いリストの表示と仮想スクロール
• SwipeCell スワイプセル - スワイプ操作をサポートするセル
• Field 入力フィールド - フォーム入力のシナリオ
• NavBar ナビゲーションバー - ページナビゲーション
• IndexBar インデックスバー - クイック検索

拡張リーディング

• モバイルリスト設計ガイドライン
• iOS Human Interface Guidelines - Lists
• Material Design - Lists
• アクセシビリティ設計ガイド