Default Width #
Use d-divide-{y|x} to create a 1px divider between an element's child items.
<dt-stack class="d-divide-y d-divide-default d-w100p"> <dt-stack direction="row" align="center" justify="center" class="d-p-200">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200">3</dt-stack> </dt-stack> <dt-stack direction="row" class="d-divide-x d-divide-default d-w100p"> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">3</dt-stack> </dt-stack>
Changing the Divider Width #
Use d-divide-{y|x}{n} to change the divider width between an element's child items.
<code>d-divide-x0</code> <dt-stack direction="row" class="d-divide-x d-divide-x0 d-divide-default d-w100p d-ba d-bc-default"> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">3</dt-stack> </dt-stack> <code>d-divide-x2</code> <dt-stack direction="row" class="d-divide-x d-divide-x2 d-divide-default d-w100p d-ba d-bc-default d-baw2"> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">3</dt-stack> </dt-stack> <code>d-divide-x4</code> <dt-stack direction="row" class="d-divide-x d-divide-x4 d-divide-default d-w100p d-ba d-bc-default d-baw4"> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">3</dt-stack> </dt-stack>
Reversing the Divider Direction #
If an element's flex-direction is reversed, apply d-divide-{y|x}-reverse to reverse the divider placement between an element's child items.
<dt-stack direction="row-reverse" class="d-divide-x d-divide-default d-divide-x-reverse d-w100p"> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-w100p d-p-200">3</dt-stack> </dt-stack>
Classes #
Class
|
Output
|
|---|---|
| d-divide-y > *+* |
--divide-y-reverse: 0; border-block-start: calc( 1 px *(1 - var(--divide-y-reverse)) ) solid !important; border-block-end: calc( 1 * var(--divide-y-reverse) ) solid !important; |
| d-divide-y0 > *+* |
--divide-y-reverse: 0; border-block-start: calc( 0 px *(1 - var(--divide-y-reverse)) ) solid !important; border-block-end: calc( 0 * var(--divide-y-reverse) ) solid !important; |
| d-divide-y2 > *+* |
--divide-y-reverse: 0; border-block-start: calc( 2 px *(1 - var(--divide-y-reverse)) ) solid !important; border-block-end: calc( 2 * var(--divide-y-reverse) ) solid !important; |
| d-divide-y4 > *+* |
--divide-y-reverse: 0; border-block-start: calc( 4 px *(1 - var(--divide-y-reverse)) ) solid !important; border-block-end: calc( 4 * var(--divide-y-reverse) ) solid !important; |
| d-divide-x > *+* |
--divide-x-reverse: 0; border-inline-end: calc( 1 px*var(--divide-x-reverse) ) solid !important; border-inline-start: calc( 1 *(1 - var(--divide-x-reverse)) ) solid !important; |
| d-divide-x0 > *+* |
--divide-x-reverse: 0; border-inline-end: calc( 0 px*var(--divide-x-reverse) ) solid !important; border-inline-start: calc( 0 *(1 - var(--divide-x-reverse)) ) solid !important; |
| d-divide-x2 > *+* |
--divide-x-reverse: 0; border-inline-end: calc( 2 px*var(--divide-x-reverse) ) solid !important; border-inline-start: calc( 2 *(1 - var(--divide-x-reverse)) ) solid !important; |
| d-divide-x4 > *+* |
--divide-x-reverse: 0; border-inline-end: calc( 4 px*var(--divide-x-reverse) ) solid !important; border-inline-start: calc( 4 *(1 - var(--divide-x-reverse)) ) solid !important; |