Code Monkey home page Code Monkey logo

svelte-tabs's Introduction

svelte-tabs

A tabs component for Svelte

Installation

npm install --save svelte-tabs

Basic usage

<script>
  import { Tabs, Tab, TabList, TabPanel } from 'svelte-tabs';
</script>

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanel>
    <h2>Panel One</h2>
  </TabPanel>

  <TabPanel>
    <h2>Panel Two</h2>
  </TabPanel>

  <TabPanel>
    <h2>Panel Three</h2>
  </TabPanel>
</Tabs>

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.
  • 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 by Rich Harris

Limitations

  • Nested tab panels are not yet supported.

svelte-tabs's People

Contributors

d0x2f avatar joeattardi avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.