Now with Partition Management

    @npmcorp/pui-react-tabs

    8.4.0 • Public • Published

    pui-react-tabs

    React components for tab-based content toggling

    Pivotal UI React (GitHub, npm) is a collection of React components for rapidly building and prototyping UIs.

    This component requires React v0.13

    See the Pivotal UI Styleguide for fully rendered examples.

    Components

    SimpleTabs

    Tab-based content toggling

    var SimpleTabs = require('
     
    #### Properties
     
    - `responsiveBreakpoint`
      - `one of: `"xs"`, `"sm"`, `"md"`, `lg``: The
    size at which the small-screen tabs (accordion-style) should switch to
    large-screen tabs (folder-style)
     
    - `defaultActiveKey`
      - `should equal one of your tab'event keys`: The
    tab which will start out open
     
    `smallScreenClassName`
      - `css class`: Will be applied to small screen
    tabs only
     
    `largeScreenClassName`
      - `css class`: Will be applied to large screen
    tabs only
     
    `onSelect`
      - `function`: Will override default behavior when clicking
    on a tab. If you want to retain the default behavior as well as add new
    functionality, change default active key in the function you provide
     
     
    ### SimpleAltTabs
     
    `<SimpleTabs>` with different styling
     
    ```js
    var SimpleAltTabs = require('
     
    #### Properties
     
    - `responsiveBreakpoint`
      - `one of: `"xs"`, `"sm"`, `"md"`, `lg``: The
    size at which the small-screen tabs (accordion-style) should switch to
    large-screen tabs (folder-style)
     
    - `defaultActiveKey`
      - `should equal one of your tab's event keys`: The
    tab which will start out open
     
    `smallScreenClassName`
      - `css class`: Will be applied to small screen
    tabs only
     
    `largeScreenClassName`
      - `css class`: Will be applied to large screen
    tabs only
     
    `onSelect`
      - `function`: Will override default behavior when clicking
    on a tab. If you want to retain the default behavior as well as add new
    functionality, change default active key in the function you provide
     
     
    ### LeftTabs
     
    Tabs with the nav stacked on the left
     
    ```js
    var LeftTabs = require('
     
    #### Properties
     
    - `responsiveBreakpoint`
      - `one of: `"xs"`, `"sm"`, `"md"`, `lg``: The
    size at which the small-screen tabs (accordion-style) should switch to
    large-screen tabs (folder-style)
     
    - `defaultActiveKey`
      - `should equal one of your tab's event keys`: The
    tab which will start out open
     
    `smallScreenClassName`
      - `css class`: Will be applied to small screen
    tabs only
     
    `largeScreenClassName`
      - `css class`: Will be applied to large screen
    tabs only
     
    `onSelect`
      - `function`: Will override default behavior when clicking
    on a tab. If you want to retain the default behavior as well as add new
    functionality, change default active key in the function you provide
     
    - `tabWidth`
      - `number`: Takes the number of bs Columns. Optional: the default is 6.
     
    - `paneWidth`
      - `number`: Takes the number of bs Columns. Optional: the default is 24 - tabWidth.
     
     
    ### Tab
     
    A container for content in a `<SimpleTabs>` or `<SimpleAltTabs>`
     
     
     
    #### Properties
     
    - `eventKey`
      - `Number`: An identifier for the tab
     
     
    *****************************************
     
    (c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.

    Install

    npm i @npmcorp/pui-react-tabs

    DownloadsWeekly Downloads

    11

    Version

    8.4.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar