segmented-control-svelte

Segmented Control is a set of two or more Segments, each of which functions as a mutually exclusive button. It features a background, which can be animated with a sliding effect.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
segmented-control-svelte
103.8.39 months agoa year agoMinified + gzip package size for segmented-control-svelte in KB

Popular Searches

Readme

Segmented Control
Segmented Control is a set of two or more Segments, each of which functions as a mutually exclusive button. It features a background, which can be animated with a sliding effect.
segmented-control-svelte

Installation and Usage

Installation
To add a component to a Svelte/SvelteKit project, run: 
npm i segmented-control-svelte

Usage
Include component on a webpage by adding 
import 'segmented-control-svelte/lightMode.css' // Optional, alternatively use darkMode.css or a custom stylesheet
import { SegmentedControl, Segment } from 'segmented-control-svelte'
within the script tag of a Svelte file. You can further use the component as such:
<SegmentedControl>
  <Segment>First</Segment>
  <Segment>Second</Segment>
</SegmentedControl>

The generated HTML will be as such:
<div class="segmented-control" role="tablist" aria-orientation="horizontal">
  <button class="segment selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">First</button>
  <button class="segment" role="tab" aria-disabled="false" aria-selected="false" aria-disabled="false" tabindex="-1">Second</button>
  <div class="segmented-control-background" role="presentation" style="width: 75px; transform: translateX(2px);"></div>
</div>

API

You can specify additional options for Segmented Control and each separate Segment.
Segmented Control
selectedIndex
Use this option to specify an index of an element to be selected by default, starting with 0.
<SegmentedControl selectedIndex={1}>
  <Segment>First</Segment>
  <Segment>Second</Segment> <!-- This element will be selected initially -->
</SegmentedControl>

You can bind to this value to have changes to the selected index be reflected both in the Segmented Control component and any other part of the interface that uses it.
<script>
  import 'segmented-control-svelte/lightMode.css'
  import { SegmentedControl, Segment } from 'segmented-control-svelte'

  let segmentedControlSelectedIndex = 1
</script>

<SegmentedControl bind:selectedIndex={segmentedControlSelectedIndex}>
  <Segment>First</Segment>
  <Segment>Second</Segment>
</SegmentedControl>

<p>Index of a selected element: {segmentedControlSelectedIndex}</p>

orientation
Use this option to specify orientation of the Segmented Control. Accepted options are "horizontal" and "vertical". Default orientation is "horizontal".
<SegmentedControl orientation='vertical'>
  <Segment>First</Segment>
  <Segment>Second</Segment>
</SegmentedControl>

Segment
label
Use this option to specify a Segment's label.
<SegmentedControl>
  <Segment label='First' />
  <Segment label='Second' />
</SegmentedControl>

Alternatively, a label can be specified between component tags:
<SegmentedControl>
  <Segment>First</Segment>
  <Segment>Second</Segment>
</SegmentedControl>

isDisabled
Use this option to disable selection of a Segment.
<SegmentedControl>
  <Segment>First</Segment>
  <Segment isDisabled={true}>Second</Segment>
</SegmentedControl>

Demo

Launch a demo by running in the terminal:
git clone --depth=1 https://github.com/stuymedova/segmented-control-svelte . # Clone the latest commit from this repository to your current directory
npm install
npm run dev

The demo will be available at http://localhost:3000. Navigate to src/routes/index.svelte to make any changes.