Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

wired-tabs

v1.0.0arrow_drop_down
v1.0.0
v0.9.2
STATUS
Passing
DOWNLOADS
7
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 months ago
SIZE
14 KB
subject
Hand-drawn sketchy Tabs web component.
1 contributor
Use wired-tabs in your project ?
Copied
npm i @bit/wiredjs.wired-elements.wired-tabs
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right

wired tabs

wired-tabs

Hand-drawn sketchy Tabs web component.

For demo and view the complete set of wired-elememts: wiredjs.com

Usage

Add wired-tabs to your project:

npm i wired-tabs

Import wired-tabs definition into your HTML page:

<script type="module" src="wired-tabs/lib/wired-tabs.js"></script>

Or into your module script:

import { WiredTab, WiredTabs } from "wired-tabs"

Use it in your web page:

<wired-tabs selected="Two">
  <wired-tab name="One">
    <h4>Card 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </wired-tab>
  <wired-tab name="Two">
    <h4>Card 2</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </wired-tab>
  <wired-tab name="Three">
    <h4>Card 3</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </wired-tab>
</wired-tabs>

WiredTabs Properties

selected - Name of the currently selected tab

WiredTab Properties

name - Unique identifier for that tab. Used for selection.

label - Text to show in the tab. Defaulst to the name property.

Custom CSS Variables

–wired-item-selected-bg Background color of the selected tab.

–wired-item-selected-color Text color of the selected tab.

License

MIT License © Preet Shihn