https://github.com/stuymedova/segmented-control-svelte

Segmented Control component implemented in Svelte
https://github.com/stuymedova/segmented-control-svelte

segmented-control svelte svelte-components sveltejs ui-components

Last synced: 27 days ago
JSON representation

Segmented Control component implemented in Svelte

• Host: GitHub
• URL: https://github.com/stuymedova/segmented-control-svelte
• Owner: stuymedova
• Created: 2022-01-08T19:53:41.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-23T23:35:26.000Z (about 1 year ago)
• Last Synced: 2024-09-28T13:42:43.139Z (about 1 month ago)
• Topics: segmented-control, svelte, svelte-components, sveltejs, ui-components
• Language: Svelte
• Homepage: https://www.npmjs.com/package/segmented-control-svelte
• Size: 96.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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.



## Installation and Usage

**Installation**

To add a component to a Svelte/SvelteKit project, run:

```shell

npm i segmented-control-svelte

```

**Usage**

Include component on a webpage by adding

```js

import 'segmented-control-svelte/main.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:

```html

  First

  Second

```

The generated HTML will be as such:

```html



  First

  Second

  




```


## 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.

```html

  First

  Second 

```

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.

```html

  import 'segmented-control-svelte/main.css'

  import { SegmentedControl, Segment } from 'segmented-control-svelte'

  let segmentedControlSelectedIndex = 1

  First

  Second

Index of a selected element: {segmentedControlSelectedIndex}

```


***orientation***

Use this option to specify orientation of the Segmented Control. Accepted options are "horizontal" and "vertical". Default orientation is "horizontal".

```html

  First

  Second

```

**Segment**

***label***

Use this option to specify a Segment's label.

```html

  

  

```

Alternatively, a label can be specified between component tags:

```html

  First

  Second

```

***isDisabled***

Use this option to disable selection of a Segment.

```html

  First

  Second

```

## Demo

Launch a demo by running in the terminal:

```shell

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.