Got UI Project

Appearance

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.
<template>
  <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
    >
    <g-divider />
    <span
      >There little thoughts are the rustle of leaves; they have their whisper of joy in my
      mind.</span
    >
  </div>
</template>
<template>
  <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
    >
    <g-divider />
    <span
      >There little thoughts are the rustle of leaves; they have their whisper of joy in my
      mind.</span
    >
  </div>
</template>

状态 ​

分割线info
分割线primary
分割线success
分割线error
分割线warning
<template>
  <g-divider type="info">分割线info</g-divider>
  <g-divider type="primary">分割线primary</g-divider>
  <g-divider type="success">分割线success</g-divider>
  <g-divider type="error">分割线error</g-divider>
  <g-divider type="warning">分割线warning</g-divider>
</template>
<template>
  <g-divider type="info">分割线info</g-divider>
  <g-divider type="primary">分割线primary</g-divider>
  <g-divider type="success">分割线success</g-divider>
  <g-divider type="error">分割线error</g-divider>
  <g-divider type="warning">分割线warning</g-divider>
</template>

设置文案 ​

可以在分割线上自定义文本内容。

What you are you do not see, what you see is your shadow.
Rabindranath Tagore
My wishes are fools, they shout across thy song, my Master. Let me but listen.
分割线
I cannot choose the best. The best chooses me.
Rabindranath Tagore
<template>
  <div>
    <span>What you are you do not see, what you see is your shadow. </span>
    <g-divider align="left">Rabindranath Tagore</g-divider>
    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
    <g-divider> 分割线 </g-divider>
    <span>I cannot choose the best. The best chooses me.</span>
    <g-divider align="right">Rabindranath Tagore</g-divider>
  </div>
</template>
<template>
  <div>
    <span>What you are you do not see, what you see is your shadow. </span>
    <g-divider align="left">Rabindranath Tagore</g-divider>
    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
    <g-divider> 分割线 </g-divider>
    <span>I cannot choose the best. The best chooses me.</span>
    <g-divider align="right">Rabindranath Tagore</g-divider>
  </div>
</template>

方向 and 偏移值 ​

可以在分割线上自定义位置

Left
Right
offset150
<template>
  <g-divider align="left" type="primary">Left</g-divider>
  <g-divider align="right" type="success">Right</g-divider>
  <g-divider align="left" :offset="150" type="warning">offset150</g-divider>
</template>
<template>
  <g-divider align="left" type="primary">Left</g-divider>
  <g-divider align="right" type="success">Right</g-divider>
  <g-divider align="left" :offset="150" type="warning">offset150</g-divider>
</template>