分隔线

颜色

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-4">
	<div class="divider" />
	<div class="divider success" />
	<div class="divider warn" />
	<div class="divider danger" />
</div>

<div className='grid gap-4'>
  <div className='divider' />
  <div className='divider success' />
  <div className='divider warn' />
  <div className='divider danger' />
</div>

方向

横向

演示

代码

HTML

代码

JSX/TSX

<div class="grid gap-4">
	<div class="divider" />
	<div class="divider success" />
	<div class="divider warn" />
	<div class="divider danger" />
</div>

<div className='grid gap-4'>
  <div className='divider' />
  <div className='divider success' />
  <div className='divider warn' />
  <div className='divider danger' />
</div>

纵向

演示

代码

HTML

代码

JSX/TSX

<div class="flex justify-between gap-4 h-40">
	<div class="divider vertical" />
	<div class="divider vertical success" />
	<div class="divider vertical warn" />
	<div class="divider vertical danger" />
</div>

<div className='flex justify-between gap-4 h-40'>
  <div className='divider vertical' />
  <div className='divider vertical success' />
  <div className='divider vertical warn' />
  <div className='divider vertical danger' />
</div>

填充内容

演示

代码

HTML

代码

JSX/TSX

这是分隔线

加载中

<div class="grid gap-4">
	<div class="divider">这是分隔线</div>
	<div class="divider">
		<div class="loader bw xs opacity-70">
			<div class="spin" />
		</div>
		<div>加载中</div>
	</div>
</div>

<div className='grid gap-4'>
  <div className='divider'>
    这是分隔线
  </div>
  <div className='divider'>
    <div className='loader bw xs opacity-70'>
      <div className='spin' />
    </div>
    <div>
      加载中
    </div>
  </div>
</div>

类名表

类名	描述
divider	用于分隔线的包装
vertical	设置垂直分隔线（默认是水平方向）

复选框抽屉