1.0.0 • Published 4 years ago
@opuscapita/oc-cm-navigation-header v1.0.0
oc-cm-navigation-header
Description
Provides a navigation header with back arrow, paging (@opuscapita/react-list-items), and a dropdown menu (@opuscapita/react-dropdown).
Installation
npm install @opuscapita/oc-cm-navigation-headerDemo
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 |
|---|---|---|---|
| title | string | null | Title shown in the left side of the header |
| onBackClick | function | null | Back button click callback. Button is hidden, if function is not provided. |
| dropdown | dropdownType | Defines options for the dropdown menu (see dropdownType for more information). | |
| paging | pagingType | Defines options for the paging (see pagingType for more information). | |
| className | string | Custom class name | |
| id | string | required | The ID |
| rightContent | node | null | an option to add custom right aligned content before dropdown menu |
| sideSectionBasis | string, number | 200px | Side column's (left, right) flex-basis value. The center column will take all the remaining space |
Types
- dropdownType:
For up-to-date information, please see: https://github.com/OpusCapita/react-dropdown/blob/master/README.md
| Prop name | Type | Default | Description |
|---|---|---|---|
| menuItems | array of menu items | required | List of the dropdown menu items |
| caret | boolean | false | If true, caret is show |
| disabled | boolean | false | Is dropdown disabled or not |
| dropup | boolean | false | Is dropup or dropdown |
| pullLeft | boolean | false | If false, dropdown is aligned on right, otherwise on left |
| title | number, string or element | Title of the dropdown |
- dropdownType - menu items:
| Prop name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | Is dropdown menu item disabled | |
| disableClosing | boolean | Is dropdown menu item's closing disabled | |
| href | string | Hyperlink of the dropdown menu item | |
| icon | element | Icon of the dropdown menu item | |
| id | number or string | Unique HTML id attribute | |
| onClick | function | Callback function of click | |
| title | number, string or element | Title of the dropdown menu item | |
| type | string | Enumeration either 'item' or 'divider' |
- pagingType:
For up-to-date information, please see: https://github.com/OpusCapita/react-list-items/blob/master/src/list-items/README.md
| Prop name | Type | Default | Description |
|---|---|---|---|
| disabled | bool | false | A sign of a disabled status of navigation icons |
| goToItem | function | required | Callback that is called when navigation to another item should happen |
| itemElement | element | null | Custom component to render between navigation icons. By default it renders a string m/n. |
| itemId | num, str | required | Initially selected item id |
| itemIds | list | required | List of item ids |
Code example
import React from 'react';
import NavigationHeader from '@opuscapita/oc-cm-navigation-header';
export default class ReactView extends React.Component {
render() {
return (
<NavigationHeader
propName="propValue"
/>
);
}
}