Skip to content

Divider 分割線

區隔內容的分割線。

基礎使用

將不同段落的文本分割。


I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes. There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
vue
<div>
    <span>
      I sit at my window this morning where the world like a passer-by stops for
      a moment, nods to me and goes.
    </span>
  <rdn-divider />
  <span>
      There little thoughts are the rustle of leaves; they have their whisper of
      joy in my mind.
    </span>
</div>

設置文案

可以在分割線上自訂文字內容 。


What you are you do not see, what you see is your shadow. My wishes are fools, they shout across thy song, my Master. Let me but listen.
vue
<span>What you are you do not see, what you see is your shadow. </span>
<rdn-divider content-position="left">Left</rdn-divider>
<span>
      My wishes are fools, they shout across thy song, my Master. Let me but
      listen.
</span>

虛線

您可以設定分隔符號的樣式。


What language is thine, O sea?The language of eternal question.

vue
<div>
  <span>What language is thine, O sea?</span>
  <rdn-divider border-style="dashed" />
  <span>The language of eternal question.</span>
</div>

垂直分隔線

可以在分割線上自訂文字內容 。


RainHomeGrass
vue
<div>
  <span>Rain</span>
  <rdn-divider direction="vertical" />
  <span>Home</span>
  <rdn-divider direction="vertical" border-style="dashed" />
  <span>Grass</span>
</div>

Tag API

Tag Attributes

Released under the MIT License.