Divider ディバイダー

セパレーターラインでコンテンツを区切ります。

基本的な使い方

デフォルトの水平線を表示します。

<van-divider />

コードデモ

基本的な使い方

<van-divider />

表示テキスト

<van-divider>テキスト</van-divider>

コンテンツ位置

<van-divider content-position="left">左側</van-divider>
<van-divider content-position="right">右側</van-divider>
<van-divider content-position="center">中央</van-divider>

垂直線

テキスト
<van-divider vertical />
テキスト
<van-divider vertical />
テキスト

カスタムスタイル

<van-divider
  :style="{
    color: '#1989fa',
    borderColor: '#1989fa',
    padding: '0 16px'
  }"
>
  カスタムスタイル
</van-divider>

垂直方向の高さ

<div style="height: 40px;">
  テキスト
  <van-divider vertical />
  テキスト
  <van-divider vertical />
  テキスト
</div>

高度な使用法

カスタムコンテンツ

<template>
  <van-divider content-position="left">
    <van-icon name="star-o" style="margin-right: 8px;" />
    カスタムコンテンツ
  </van-divider>
</template>

リストの区切り線

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div style="padding: 16px;">{{ item.title }}</div>
      <van-divider v-if="item.id !== list.length" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref([
      { id: 1, title: 'アイテム1' },
      { id: 2, title: 'アイテム2' },
      { id: 3, title: 'アイテム3' }
    ]);
    
    return {
      list,
    };
  },
};
</script>

カードの区切り線

<template>
  <van-card>
    <template #title>
      <div>カードタイトル</div>
    </template>
    <template #desc>
      <div>カードの説明</div>
    </template>
    <template #footer>
      <van-divider />
      <div style="display: flex; justify-content: space-between;">
        <van-button size="mini">ボタン1</van-button>
        <van-button size="mini">ボタン2</van-button>
      </div>
    </template>
  </van-card>
</template>

📋 API

🎛️ プロパティ

パラメータ	説明	タイプ	デフォルト値
dashed	破線スタイルを使用するかどうか	boolean	false
hairline	ヘアラインを使用するかどうか	boolean	true
vertical	垂直線として表示するかどうか	boolean	false
content-position	コンテンツの位置、オプション値は left、right、center	string	center

🎭 スロット

名称	説明
default	ディバイダーのコンテンツ

🎨 スタイル変数

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

変数名	デフォルト値	説明
--van-divider-margin	var(--van-padding-md) var(--van-padding-xl)	ディバイダーの外側余白
--van-divider-text-color	var(--van-text-color-2)	デバイダーのテキスト色
--van-divider-font-size	var(--van-font-size-md)	デバイダーのフォントサイズ
--van-divider-line-height	24px	デバイダーの行の高さ
--van-divider-border-color	var(--van-border-color)	デバイダーの境界線の色
--van-divider-content-padding	var(--van-padding-md)	デバイダーのコンテンツの内側余白

📘 タイプ定義

コンポーネントは以下のタイプ定義をエクスポートし、TypeScriptプロジェクトでの使用に便利です：

import type { DividerContentPosition } from 'vant';

🎨 テーマカスタマイズ

🎭 スタイル変数

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