Segmented Controller

SegmentedController

The SegmentedController is a series of buttons for dividing elements on the same page.

The segment will automatically transform into a select element when the screen is too small to support the full width bar.

Props

style string default
"line" or "default"

segments Array<Segment>
This is an array of options for all of the buttons to include

segment[].label string
This is the label that the user will see

segment[].onclick function
This is the function that will fire that will determine the logic for your segment. Typically you will want to hide some sections and show others.

<script>
  import { SegmentedController, Card, CardHeader } from "bubbles-ui";

  let active = "1";
</script>

<SegmentedController
  style="default"
  segments={[
    {
      label: "Section 1",
      onclick: () => {
        active = "1";
      },
    },
    {
      label: "Section 2",
      onclick: () => {
        active = "2";
      },
    },
    {
      label: "Section 3",
      onclick: () => {
        active = "3";
      },
    },
  ]}
/>
<div class:hidden={active !== "1"}>
  <Card>
    <CardHeader title="Section 1" border={false} />
  </Card>
</div>

<div class:hidden={active !== "2"}>
  <Card>
    <CardHeader title="Section 2" border={false} />
  </Card>
</div>

<div class:hidden={active !== "3"}>
  <Card>
    <CardHeader title="Section 3" border={false} />
  </Card>
</div>