1.1.0 • Published 5 years ago
@opuscapita/oc-cm-filtering-pane v1.1.0
oc-cm-filtering-pane
Description
Provides a filtering pane with optional a tab based navigation (@opuscapita/react-responsive-navbar), left aligned content, right aligned content and dropdown menu (@opuscapita/react-dropdown).
Installation
npm install @opuscapita/oc-cm-filtering-paneDemo
View the DEMO
Builds
UMD
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
CommonJS/ES Module
You need to configure your module loader to use cjs or es fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
- With webpack use resolve.mainFields to configure the module type.
- Add SASS loader to support importing of SASS styles.
API
| Prop name | Type | Default | Description |
|---|---|---|---|
| class | string | required | ID for the DOM element |
| id | string | required | Class for the DOM element |
| tabs | tabsType | Defines options for the responsive navigation bar (see tabsType for more information). | |
| leftAlignedContent | node | null | Left aligned content |
| rightAlignedContent | node | null | Right aligned content |
| menuItems | array | [] | @opuscapita/react-dropdown: List of the dropdown menu items (check menuItems props from @opuscapita/react-dropdown) |
Types
- tabsType:
| Prop name | Type | Default | Description |
|---|---|---|---|
| activeKey | number or object | required | @opuscapita/react-responsive-navbar: Navbar item to be active initially |
| list | list | required | @opuscapita/react-responsive-navbar: navigation items |
| onSelect | function | null | @opuscapita/react-responsive-navbar: Callback fired when the active item changes |
| showNavItemBorder | bool | false | @opuscapita/react-responsive-navbar: show bottom-border below navbar items |
| showNavItemTooltip | bool | true | @opuscapita/react-responsive-navbar: enables tooltips for nav items |
Code example
import React from "react";
import FilteringPane from "@opuscapita/oc-cm-filtering-pane";
export default class ReactView extends React.Component {
render() {
return <FilteringPane propName="propValue" />;
}
}