nickyhajal / svelte-tabs Goto Github PK

View Code? Open in Web Editor NEW

92.0 2.0 23.0 203 KB

Tabs component for Svelte

Home Page: https://joeattardi.github.io/svelte-tabs/

JavaScript 46.84% Svelte 53.16%

javascript tabs svelte svelte-v3

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

Stargazers

Watchers

svelte-tabs's Issues

A11y issues

node_modules/svelte-tabs/src/Tab.svelte:46:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
44: </style>
45:
46: <li
    ^
47:   bind:this={tabEl}
48:   role="tab"

node_modules/svelte-tabs/src/Tabs.svelte:98:0 A11y: <div> with keydown handler must have an ARIA role
 96: </script>
 97:
 98: <div class="svelte-tabs" on:keydown={handleKeyDown}>
     ^
 99:   <slot></slot>
100: </div>

Missing on:tabChanged event

There is no way to restore the current state of the tabs. It would be nice to have an event fire when the tab changes. Users can update their svelte state and localStorage.

Something like...

<Tabs initialSelectedIndex={$tabIndex} on:tabChanged={index =>{
  tabIndex.set(index);
}>
	<TabList>
		<Tab>Triage</Tab>
	</TabList>

	<TabPanel>	
	     <TriageForm visit_id={visit.id} />	
	</TabPanel>

</Tabs>

reactivity on selectedTabIndex not working

Trying to change tabs from outside the Tabs component by changing the selectedTabIndex prop, but it isn't working.

Not sure if the $: variable, anonymous function syntax is legacy, but it doesn't seem to do anything now. I changed it to a function call containing the variable:

on the Tabs.svelte:

  $: selectedTabIndex, ()=>{
    selectedTab.set(tabs[selectedTabIndex]);
    selectedPanel.set(panels[selectedTabIndex]);
  };

doesn't work

Changing it to

 const setTabAndPanel = (idx) => {
    selectedTab.set(tabs[idx]);
    selectedPanel.set(panels[idx]);
}

$: setTabAndPanel(selectedTabIndex)

works.

If I can, I'll make a pull request, but it'll be some time.

tabs

How change tab programmatically?

If the number of tabs is different than the number of tab panels, it crashes.

Typings

Hi, I realy like your Tab implementation.

However since I use typescript the editor always complains that there are no types. I always need to add following in my d.ts file:

declare module "svelte-tabs" {
    import { SvelteComponentTyped } from "svelte"
    export class Tab extends SvelteComponentTyped { }
    export class Tabs extends SvelteComponentTyped<{ initialSelectedIndex?: number }> { }
    export class TabList extends SvelteComponentTyped { }
    export class TabPanel extends SvelteComponentTyped { }
}

And since I need to look up how to type SvelteConmponents, it would be nice if you could include the Typings in your package.

Error: <Tabs> is not a valid SSR component.

I installed this lib and it worked great for the first 30min. Then I stopped my server and started again, now gives error. Have no idea what to do. Didn't change code.

Error: <Tabs> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at validate_component (webpack:///./node_modules/svelte/internal/index.mjs?:1375:15)
    at eval (webpack:///./src/components/EmptyDash.svelte?:28:77)
    at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)
    at eval (webpack:///./src/routes/%5Busername%5D/%5Bdash%5D.svelte?:81:165)
    at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)
    at Object.default (webpack:///./src/node_modules/@sapper/internal/App.svelte?:37:190)
    at eval (webpack:///./src/node_modules/@sapper/internal/layout.svelte?:7:45)
    at Object.$$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)
    at eval (webpack:///./src/node_modules/@sapper/internal/App.svelte?:33:144)
    at $$render (webpack:///./node_modules/svelte/internal/index.mjs?:1398:22)

500

JSON.parse: unexpected character at line 1 column 1 of the JSON data

My component:

<script>
  import { Tabs, Tab, TabList, TabPanel } from "svelte-tabs";
  export let page;
</script>

<h1>Hello there {page.params.username}</h1>

<Tabs>
  <TabList>
    <Tab>JavaScript</Tab>
    <Tab>Curl</Tab>
    <Tab>Python</Tab>
    <Tab>Elixir</Tab>
  </TabList>

  <TabPanel>
[...truncated...]
  </TabPanel>

  <TabPanel>
[...truncated...]
  </TabPanel>

  <TabPanel>
[...truncated...]
  </TabPanel>

  <TabPanel>
[...truncated...]
  </TabPanel>
</Tabs>

Changing margin shifts following content

Any content after Tabs will be shifted upward by .5em when the last Tab is selected.
This is due to this CSS rule:
.svelte-tabs__tab-panel { margin-top: 0.5em; }
Putting the margin on the TabList instead fixes the problem.
.svelte-tabs__tab-list { margin-bottom: .5em; }

svelte-tabs publish

@joeattardi Did you forget to release a new version?
Hope to release version 1.2.0.
Thanks!