33 lines
1.1 KiB
Markdown
33 lines
1.1 KiB
Markdown
# App Bar
|
||
|
||
The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions. Usually it contains controls on the right and left side and a title with the current section or app name. You should give the content with children elements.
|
||
|
||
```jsx
|
||
import AppBar from 'react-toolbox/lib/app_bar';
|
||
import theme from 'react-toolbox/lib/app_bar/style';
|
||
|
||
const AppBarTest = () => (
|
||
<AppBar theme={theme} fixed flat>
|
||
<a href="/home">React Toolbox Docs</a>
|
||
<Navigation />
|
||
</AppBar>
|
||
);
|
||
```
|
||
|
||
## Properties
|
||
|
||
| Name | Type | Default | Description|
|
||
|:-----|:-----|:-----|:-----|
|
||
| `className` | `String` | `''` | Set a class for the root component.|
|
||
| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||
| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.|
|
||
| `theme` | `Object` | `null` | Classnames object defining the component style.|
|
||
|
||
## Theme interface
|
||
|
||
| Name | Description|
|
||
|:---------|:-----------|
|
||
| `appBar` | Root class.|
|
||
| `fixed` | Implemented when the app bar is fixed.|
|
||
| `flat` | Implemented when the app bar is flat.|
|