0.0.12 • Published 6 years ago

accessible-react-tabs v0.0.12

Weekly downloads
6
License
MIT
Repository
github
Last release
6 years ago

Accessible tab component for React

Properly and efficiently handles clicks, keystrokes, and tabindexes. Also allows for callbacks to be passed to perform some action when a tab is clicked (optional).

Usage

import Tabs from './Tabs';

...

const tabContent = [
  {
    label: 'Some Component',
    content: <SomeComponent />,
    callback: this.someCallback
  },
  {
    label: 'Another Component',
    content: <AnotherComponent someProp={this.someFunc} />,
    callback: () => {}
  },
  {
    label: 'Third Tab',
    content: <ThirdComponent />
  }
];

...

render() {
  return (
    <Tabs data={tabContent} />
  )
}

Styling

No styles are included, but use the following for reference:

.dz0-wrapper-tabs {

  .dz0-tabs {

    .dz0-tab {

      &.is-selected {

      }
    }
  }

  .dz0-tabpanels {

    .dz0-tabpanel {

      &.is-selected {

      }
    }
  }
}
0.0.12

6 years ago

0.0.11

7 years ago

0.0.10

8 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago