@opuscapita/oc-cm-navigation-header

OpusCapita CM Navigation Header.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Jan 22, 2020Aug 3, 2018Minified + gzip package size for @opuscapita/oc-cm-navigation-header in KB

Readme

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-header

Demo

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.

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"
      />
    );
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.