Revo Docs

Segmented links

An icon group for segmented.

<x-ui::segmented-links>
    <x-ui::segmented-links.a href="#" :active="false" icon="chart-pie" />
    <x-ui::segmented-links.a href="#" :active="true" icon="chart-simple" />
    <x-ui::segmented-links.a href="#" :active="false" icon="chart-line" />
</x-ui::segmented-links>
Copied!

Texts

You can also use texts instead

<x-ui::segmented-links>
    <x-ui::segmented-links.a href="#" :active="false">First</x-ui::segmented-links.a>
    <x-ui::segmented-links.a href="#" :active="true">Second</x-ui::segmented-links.a>
    <x-ui::segmented-links.a href="#" :active="false">Third</x-ui::segmented-links.a>
</x-ui::segmented-links>
Copied!

Texts and icons

You can also combine

<x-ui::segmented-links>
    <x-ui::segmented-links.a href="#" :active="false" icon="chart-pie">First</x-ui::segmented-links.a>
    <x-ui::segmented-links.a href="#" :active="true" icon="chart-simple">Second</x-ui::segmented-links.a>
    <x-ui::segmented-links.a href="#" :active="false" icon="chart-line">Third</x-ui::segmented-links.a>
</x-ui::segmented-links>
Copied!