Segmented Control Svelte Component

Segmented Components
Segmented Props
SegmentedButton Props
Examples

Segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).

Segmented Components

There are following components included:

Segmented - segmented wrapper for buttons
SegmentedButton - single segmented button

Segmented Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.borderIos	string	'border-primary'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.divideIos	string	'divide-primary'
colors.divideMaterial	string	'divide-md-light-outline dark:divide-md-dark-outline'
colors.strongBgIos	string	'bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-10'
colors.strongBgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
outline	boolean	false	Makes segmented outline
raised	boolean	false	Makes segmented raised
rounded	boolean	false	Makes segmented rounded
strong	boolean	false	Makes segmented strong

SegmentedButton Props

SegmentedButton component extends Button component, it supports all Button props and the following additional props:

Name	Type	Default	Description
active	boolean	false	Highlights button as active
rounded	boolean	false	Makes segmented button rounded (should be used within `<Segmented rounded>`)
strong	boolean	false	Makes strong segmented button (should be used within `<Segmented strong>`)
onClick	function(e)		`click` event handler

Examples

SegmentedControl.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Segmented,
    SegmentedButton,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

  let activeSegmented = 1;
</script>

<Page>
  <Navbar title="Segmented Control" />

  <BlockTitle>Default Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>

    <Segmented rounded>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Raised Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented raised>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
    <Segmented raised rounded>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Outline</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented outline>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
    <Segmented rounded outline>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Strong Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented strong>
      <SegmentedButton
        strong
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>

    <Segmented strong rounded>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>
</Page>