{"id":14970976,"url":"https://github.com/stuymedova/segmented-control-svelte","last_synced_at":"2025-11-12T09:03:23.502Z","repository":{"id":37568869,"uuid":"445914781","full_name":"stuymedova/segmented-control-svelte","owner":"stuymedova","description":"Segmented Control component implemented in Svelte","archived":false,"fork":false,"pushed_at":"2023-08-23T23:35:26.000Z","size":99,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-21T07:43:50.268Z","etag":null,"topics":["segmented-control","svelte","svelte-components","sveltejs","ui-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/segmented-control-svelte","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stuymedova.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-08T19:53:41.000Z","updated_at":"2025-07-09T16:29:19.000Z","dependencies_parsed_at":"2024-09-23T08:00:36.351Z","dependency_job_id":null,"html_url":"https://github.com/stuymedova/segmented-control-svelte","commit_stats":{"total_commits":51,"total_committers":1,"mean_commits":51.0,"dds":0.0,"last_synced_commit":"7bdaad167509182a186f170a7a5ebc28b2bc9934"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stuymedova/segmented-control-svelte","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuymedova%2Fsegmented-control-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuymedova%2Fsegmented-control-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuymedova%2Fsegmented-control-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuymedova%2Fsegmented-control-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stuymedova","download_url":"https://codeload.github.com/stuymedova/segmented-control-svelte/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuymedova%2Fsegmented-control-svelte/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284005379,"owners_count":26931082,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-12T02:00:06.336Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["segmented-control","svelte","svelte-components","sveltejs","ui-components"],"created_at":"2024-09-24T13:44:26.953Z","updated_at":"2025-11-12T09:03:23.469Z","avatar_url":"https://github.com/stuymedova.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Segmented Control\n\nSegmented 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.\n\n\u003cimg width=\"1153\" alt=\"segmented-control-svelte\" src=\"https://user-images.githubusercontent.com/53351370/150729107-af17b189-4b81-42ec-8fda-985699180c8e.png\"\u003e\n\n## Installation and Usage\n\n**Installation**\n\nTo add a component to a Svelte/SvelteKit project, run:\n```shell\nnpm i segmented-control-svelte\n```\n\n**Usage**\n\nInclude component on a webpage by adding\n```js\nimport 'segmented-control-svelte/main.css' // Optional, alternatively use darkMode.css or a custom stylesheet\nimport { SegmentedControl, Segment } from 'segmented-control-svelte'\n```\nwithin the `script` tag of a Svelte file. You can further use the component as such:\n\n```html\n\u003cSegmentedControl\u003e\n  \u003cSegment\u003eFirst\u003c/Segment\u003e\n  \u003cSegment\u003eSecond\u003c/Segment\u003e\n\u003c/SegmentedControl\u003e\n```\n\nThe generated HTML will be as such:\n\n```html\n\u003cdiv class=\"segmented-control\" role=\"tablist\" aria-orientation=\"horizontal\"\u003e\n  \u003cbutton class=\"segment selected\" role=\"tab\" aria-selected=\"true\" aria-disabled=\"false\" tabindex=\"0\"\u003eFirst\u003c/button\u003e\n  \u003cbutton class=\"segment\" role=\"tab\" aria-disabled=\"false\" aria-selected=\"false\" aria-disabled=\"false\" tabindex=\"-1\"\u003eSecond\u003c/button\u003e\n  \u003cdiv class=\"segmented-control-background\" role=\"presentation\" style=\"width: 75px; transform: translateX(2px);\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## API\n\nYou can specify additional options for Segmented Control and each separate Segment.\n\n**Segmented Control**\n\n***selectedIndex***\n\nUse this option to specify an index of an element to be selected by default, starting with 0.\n\n```html\n\u003cSegmentedControl selectedIndex={1}\u003e\n  \u003cSegment\u003eFirst\u003c/Segment\u003e\n  \u003cSegment\u003eSecond\u003c/Segment\u003e \u003c!-- This element will be selected initially --\u003e\n\u003c/SegmentedControl\u003e\n```\n\nYou 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.\n\n```html\n\u003cscript\u003e\n  import 'segmented-control-svelte/main.css'\n  import { SegmentedControl, Segment } from 'segmented-control-svelte'\n\n  let segmentedControlSelectedIndex = 1\n\u003c/script\u003e\n\n\u003cSegmentedControl bind:selectedIndex={segmentedControlSelectedIndex}\u003e\n  \u003cSegment\u003eFirst\u003c/Segment\u003e\n  \u003cSegment\u003eSecond\u003c/Segment\u003e\n\u003c/SegmentedControl\u003e\n\n\u003cp\u003eIndex of a selected element: {segmentedControlSelectedIndex}\u003c/p\u003e\n```\n\n***orientation***\n\nUse this option to specify orientation of the Segmented Control. Accepted options are \"horizontal\" and \"vertical\". Default orientation is \"horizontal\".\n\n```html\n\u003cSegmentedControl orientation='vertical'\u003e\n  \u003cSegment\u003eFirst\u003c/Segment\u003e\n  \u003cSegment\u003eSecond\u003c/Segment\u003e\n\u003c/SegmentedControl\u003e\n```\n\n**Segment**\n\n***label***\n\nUse this option to specify a Segment's label.\n\n```html\n\u003cSegmentedControl\u003e\n  \u003cSegment label='First' /\u003e\n  \u003cSegment label='Second' /\u003e\n\u003c/SegmentedControl\u003e\n```\n\nAlternatively, a label can be specified between component tags:\n\n```html\n\u003cSegmentedControl\u003e\n  \u003cSegment\u003eFirst\u003c/Segment\u003e\n  \u003cSegment\u003eSecond\u003c/Segment\u003e\n\u003c/SegmentedControl\u003e\n```\n\n***isDisabled***\n\nUse this option to disable selection of a Segment.\n\n```html\n\u003cSegmentedControl\u003e\n  \u003cSegment\u003eFirst\u003c/Segment\u003e\n  \u003cSegment isDisabled={true}\u003eSecond\u003c/Segment\u003e\n\u003c/SegmentedControl\u003e\n```\n\n## Demo\n\nLaunch a demo by running in the terminal:\n\n```shell\ngit clone --depth=1 https://github.com/stuymedova/segmented-control-svelte . # Clone the latest commit from this repository to your current directory\nnpm install\nnpm run dev\n```\n\nThe demo will be available at http://localhost:3000. Navigate to `src/routes/index.svelte` to make any changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstuymedova%2Fsegmented-control-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstuymedova%2Fsegmented-control-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstuymedova%2Fsegmented-control-svelte/lists"}