
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/divider/index.mdx'

## 默认类名表格
  
<CssTable name="divider" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.divider {
  @apply flex flex-row items-center self-stretch;
}
.divider:before,
.divider:after {
  @apply h-0.5 w-full flex-grow content-[''];
}
.divider-start:before {
  @apply hidden;
}
.divider-end:after {
  @apply hidden;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.divider {
  @apply my-4 h-4 whitespace-nowrap;
}
.divider:before,
.divider:after {
  @apply bg-base-content/10;
}
.divider:not(:empty) {
  @apply gap-4;
}
.divider-primary:before,
.divider-primary:after {
  @apply bg-primary;
}
.divider-success:before,
.divider-success:after {
  @apply bg-success;
}
.divider-warning:before,
.divider-warning:after {
  @apply bg-warning;
}
.divider-error:before,
.divider-error:after {
  @apply bg-error;
}
.divider-neutral:before,
.divider-neutral:after {
  @apply bg-neutral;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.divider-horizontal {
  @apply flex-col;
  @apply mx-4 my-0 h-auto w-4;
}
.divider-horizontal:before {
  @apply h-full w-0.5;
}
.divider-horizontal:after {
  @apply h-full w-0.5;
}

.divider-vertical {
  @apply flex-row;
  @apply mx-0 my-4 h-4 w-auto;
}
.divider-vertical:before {
  @apply h-0.5 w-full;
}
.divider-vertical:after {
  @apply h-0.5 w-full;
}

```

</div>
</div>



