Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joeattardi/svelte-tabs
Tabs component for Svelte
https://github.com/joeattardi/svelte-tabs
javascript svelte svelte-v3 tabs
Last synced: about 19 hours ago
JSON representation
Tabs component for Svelte
- Host: GitHub
- URL: https://github.com/joeattardi/svelte-tabs
- Owner: nickyhajal
- Created: 2019-08-12T03:47:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T13:40:03.000Z (about 1 year ago)
- Last Synced: 2025-01-26T12:02:34.071Z (about 20 hours ago)
- Topics: javascript, svelte, svelte-v3, tabs
- Language: Svelte
- Homepage: https://joeattardi.github.io/svelte-tabs/
- Size: 198 KB
- Stars: 93
- Watchers: 2
- Forks: 23
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-tabs
A tabs component for Svelte
## Installation
npm install --save svelte-tabs
## Basic usage
```html
import { Tabs, Tab, TabList, TabPanel } from 'svelte-tabs';
One
Two
Three
Panel One
Panel Two
Panel Three
```
## Props
- `selectedTabIndex` (number): The index of the tab to initially select, when the Tabs component is mounted.
## Overriding styling
svelte-tabs comes with a basic default style, but it can be overridden. To override the styles to use your own, you will need to use global styles that have a higher specificity than the built-in styles.
To make sure your overridden styles have the most specificity, include the parent class `.svelte-tabs` in your selector, and include the element type (see below). An example selector would be `:global(.svelte-tabs li.svelte-tabs__selected)`.
Below are CSS selectors that can be used for the different components in this library:
- Tabs: `:global(.svelte-tabs)`
- Tab: `:global(.svelte-tabs li.svelte-tabs__tab)`
- Selected Tab: `:global(.svelte-tabs li.svelte-tabs__selected)`
- TabPanel: `:global(.svelte-tabs div.svelte-tabs__tab-panel)`
As a last resort, if you can't get the right specificity, you can always use `!important`.
## Development
- Fork and clone the repository, then run `npm install`.
- From the repository root, run `npm link`.
- From the repository root, run `npm run build:watch`.
- From the `examples` directory, run `npm link svelte-tabs`.
- From the `examples` directory, run `npm run dev`.
- Go to [http://localhost:5000](http://localhost:5000).
- You now have a running development environment. Changes you make to the component will be reflected in the app.
## Running tests
To do a single run of the tests, run `npm test`. To run the tests in watch mode, run `npm run dev:watch`.
## Credits
Derived from the code at [https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.7.0](https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.7.0) by Rich Harris
## Limitations
- Nested tab panels are not yet supported.