Topbar
Create a TREND topbar component.
Installation
## Has peer dependency with react and react-dom
npm install react react-dom
npm install @trend/topbar
Basic Usage
With a module bundler like webpack, use as you would anything else:
// Using ES6 modules.
@import React from 'react';
@import Topbar from 'trend-react-components/Topbar';
function Header({ children }) {
return <Topbar fixed={true}>
{ api =>
<header {...api.getElementProps()}>
<div {...api.getInnerProps()}>
<div {...api.getSectionProps({ position: 'start' })}>
<button {...api.getIconProps({ type: 'button' })}>
<MenuIcon />
</button>
<h1 {...api.getTitleProps()}>TREND Components</h1>
</div>
{children}
</div>
</header>
}
</Topbar>;
}
// Bare minimum markup that is required.
function AnotherTopbar() {
return <Topbar>
{ api =>
<header {...api.getElementProps()}>
<div {...api.getInnerProps()}>...</div>
</header>
}
</Topbar>;
}
Implementing the markup is up to the developer. The api exposes prop getters for all the pieces that make up a TREND Topbar component. This is intentional to allow the developer to choose the markup that fits best for use case.
Props:
children
function
| required
Will expose the prop getter api.
className
string
| options, no default
Will merge any class names passed into component directly to the
getElementProps
getter. Alternatively, you can just pass any class names directly to the getElementsProps({ className: '' })
getter.
compact
boolean
| optional, no default
Will add the compact
modifier to the className
for the getElementsProps
getter.
fixed
boolean
| optional, no default
Will add the fixed
modifier to the className
for the getElementsProps
getter.
fixedScroll
boolean
| optional, no default
For topbars that are hidden on downward scrolls, but visible while user scrolls up.
scrollTarget
object
| optional,window
The DOM node to detect scrolling on.
tall
boolean
| optional, no default
Will add the tall
modifier to the className
for the getElementsProps
getter.
Property | Category | Type | Description |
---|---|---|---|
getElementProps |
prop getter | function(props: object) |
Returns object of props to add to the topbar. |
getInnerProps |
prop getter | function(props: object) |
Returns props object to add to the inner child component. |
getSectionProps |
prop getter | function(props: object) |
Returns props object to add to any section child components. Pass in a optional position: <start|end> property to add section modifier. |
getIconProps |
prop getter | function(props: object) |
Returns props object to add to any icon child components. |
getTitleProps |
prop getter | function(props: object) |
Returns props object to add to the title child component. |