@rei/cdr-tabs v1.0.2

Props

For the most up-to-date information, see REI Cedar documentation.

CdrTabs

Sets height of the tabs container element. This is needed for managing content overflow and animations.

Modifies the style variants for this component. Possible values: { 'compact' | 'full-width' | 'no-border' }

CdrTabPanel

Sets tab display name. Required and must be unique for each tab. If id prop not provided, this value will be used as the reference identifier.

Sets reference identifier. Must be unique for each tab.

Installation

Resources are available within the cdr-tabs package:

• Component: @rei/cdr-tabs
• Component styles: cdr-tabs.css

To incorporate the required assets for a component, use the following steps:

#1. Install using NPM

Install the cdr-tabs package using npm in your terminal:

Terminal

npm i -s @rei/cdr-tabs

#2. Import Dependencies

main.js

// import your required css.
import "@rei/cdr-tabs/dist/cdr-tabs.css";

#3. Add component to a template

local.vue

<template>
  <cdr-tabs>
    <cdr-tab-panel name="tab1">TAB1 CONTENT GOES HERE</cdr-tab-panel>
    <cdr-tab-panel name="tab2">TAB2 CONTENT GOES HERE</cdr-tab-panel>
    <cdr-tab-panel name="tab3">TAB3 CONTENT GOES HERE</cdr-tab-panel>
  </cdr-tabs>
</template>

<script>
import { CdrTabs, CdrTabPanel } from '@rei/cdr-tabs';
export default {
  ...
  components: {
     CdrTabs,
     CdrTabPanel
  },
}
</script>

Usage

The cdr-tab name property sets the tab display value and is used for reference

<cdr-tabs>
  <cdr-tab name="tab1">Tab 1 Content</cdr-tab>
</cdr-tabs>

Modifiers

Set the visual presentation by passing the following variants to the modifier attribute of the CdrTabs component.