element-plus/website/docs/fr-FR/divider.md
三咲智子 55348b30b6
style: use prettier (#3228)
* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console
2021-09-04 19:29:28 +08:00

1.9 KiB
Raw Blame History

Divider

Une ligne de séparation entre deux contenus.

Usage basique

Séparer le texte de deux paragraphes.

:::demo

<template>
  <div>
    <span
      >Je suis assis à ma fenêtre ce matin où le monde, tel un passant, sarrête
      un instant, me fait signe de la tête et part.</span
    >
    <el-divider></el-divider>
    <span
      >Les petites pensées sont le bruissement des feuilles; ils ont leur
      murmure de joie dans mon esprit.</span
    >
  </div>
</template>

:::

Contenu personnalisé

Vous ajouter du contenu dans la ligne de séparation.

:::demo

<template>
  <div>
    <span
      >Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre
      ombre.</span
    >
    <el-divider content-position="left">Rabindranath Tagore</el-divider>
    <span>Je ne peux pas choisir le meilleur. Le meilleur me choisit.</span>
    <el-divider><i class="el-icon-star-on"></i></el-divider>
    <span
      >Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon
      Maître. Laisse-moi mais écoute.</span
    >
    <el-divider content-position="right">Rabindranath Tagore</el-divider>
  </div>
</template>

:::

Séparation verticale

:::demo

<template>
  <div>
    <span>Pluie</span>
    <el-divider direction="vertical"></el-divider>
    <span>Maison</span>
    <el-divider direction="vertical"></el-divider>
    <span>Herbe</span>
  </div>
</template>

:::

Attributs

Attribut Description Type Valeurs acceptées Défaut
direction Règle la direction du séparateur. string horizontal / vertical horizontal
content-position Personnalise le contenu du séparateur. String left / right / center center