Divider

This component serves as a horizontal content divider, offering the flexibility to include custom content or default to displaying a simple line. The content alignment can be adjusted to the start, center, or end based on the configuration.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur consequuntur debitis delectus distinctio explicabo nostrum rerum sunt voluptatibus? Alias earum ex facilis illum ipsa magnam provident quia quo sapiente ut.

---

Ab, deserunt eius eos, eveniet explicabo itaque minima officia optio pariatur perspiciatis provident quaerat qui, quo sapiente temporibus veritatis vero voluptates voluptatibus. Commodi dolore in maiores provident quod ratione repudiandae.

Aliquam aperiam corporis, cupiditate eaque esse fuga, hic inventore odio quam quibusdam quisquam suscipit vel voluptatem! Assumenda cumque distinctio dolorem fugit ipsam maiores numquam provident ratione saepe sunt? Facilis, sapiente.

Props

content-placement?: start | center | end
The placement of the content.

Slots

default
The content shown within the divider.

Examples

Clear

A standalone divider.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid at cumque cupiditate debitis dicta ea earum, facilis laudantium mollitia nam non nulla perferendis praesentium quia sapiente soluta totam vel!

---

Cupiditate deleniti, dolorum ducimus facilis fugit molestiae odit quae quis ratione sapiente! Ad, beatae consequatur cupiditate ducimus eaque error eveniet ipsum laborum, natus optio perspiciatis quas ratione recusandae sit unde.

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid at cumque cupiditate debitis dicta ea earum, facilis laudantium mollitia nam non nulla perferendis praesentium quia sapiente soluta totam vel!</p>

            <FluxDivider/>

            <p>Cupiditate deleniti, dolorum ducimus facilis fugit molestiae odit quae quis ratione sapiente! Ad, beatae consequatur cupiditate ducimus eaque error eveniet ipsum laborum, natus optio perspiciatis quas ratione recusandae sit unde.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxDivider, FluxPane, FluxPaneBody } from '@flux-ui/flux';
</script>

Button

A divider with a button at the end.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid at cumque cupiditate debitis dicta ea earum, facilis laudantium mollitia nam non nulla perferendis praesentium quia sapiente soluta totam vel!

Cupiditate deleniti, dolorum ducimus facilis fugit molestiae odit quae quis ratione sapiente! Ad, beatae consequatur cupiditate ducimus eaque error eveniet ipsum laborum, natus optio perspiciatis quas ratione recusandae sit unde.

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid at cumque cupiditate debitis dicta ea earum, facilis laudantium mollitia nam non nulla perferendis praesentium quia sapiente soluta totam vel!</p>

            <FluxDivider content-placement="end">
                <FluxSecondaryButton label="Button"/>
            </FluxDivider>

            <p>Cupiditate deleniti, dolorum ducimus facilis fugit molestiae odit quae quis ratione sapiente! Ad, beatae consequatur cupiditate ducimus eaque error eveniet ipsum laborum, natus optio perspiciatis quas ratione recusandae sit unde.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxDivider, FluxPane, FluxPaneBody, FluxSecondaryButton } from '@flux-ui/flux';
</script>

Icon

A divider with a centered icon.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid at cumque cupiditate debitis dicta ea earum, facilis laudantium mollitia nam non nulla perferendis praesentium quia sapiente soluta totam vel!

Cupiditate deleniti, dolorum ducimus facilis fugit molestiae odit quae quis ratione sapiente! Ad, beatae consequatur cupiditate ducimus eaque error eveniet ipsum laborum, natus optio perspiciatis quas ratione recusandae sit unde.

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid at cumque cupiditate debitis dicta ea earum, facilis laudantium mollitia nam non nulla perferendis praesentium quia sapiente soluta totam vel!</p>

            <FluxDivider>
                <FluxIcon name="bolt"/>
            </FluxDivider>

            <p>Cupiditate deleniti, dolorum ducimus facilis fugit molestiae odit quae quis ratione sapiente! Ad, beatae consequatur cupiditate ducimus eaque error eveniet ipsum laborum, natus optio perspiciatis quas ratione recusandae sit unde.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxDivider, FluxIcon, FluxPane, FluxPaneBody } from '@flux-ui/flux';
</script>