<LayerPanelHeader />

Constructor

# <LayerPanelHeader title actions avatar />

PropTypes:
Name Type Required Description Default
title string No A string for the LayerPanelHeader title
actions union No array or component to render in the LayerPanelMenu
avatar node No component to render on the left side of the title
Since:
  • 0.5.0

View Source LayerPanel/LayerPanelHeader/index.js, line 10


Examples

Use a LayerPanelHeader to get a nice header at the top. There are several props for the Header component. (title, avatar, and actions)

import {
  LayerPanel,
  LayerPanelPage,
  LayerPanelHeader,
  LayerPanelContent } from '@bayer/ol-kit'
import VpnKeyIcon from '@material-ui/icons/VpnKeyIcon'

return (
  <LayerPanel>
    <LayerPanelPage tabIcon={<VpnKeyIcon />}>
      <LayerPanelHeader title='Legends Page' />
      <LayerPanelContent>
        Place your legend images here...
      </LayerPanelContent>
    </LayerPanelPage>
  </LayerPanel>
)

image

The LayerPanelHeader can be powerful. If you want actions in your header pass a LayerPanelActions component with the actions you want in it. We have built in actions in ol-kit. Check out the docs for all of them. In the example we're using LayerPanelActionRemove which is from ol-kit and the Update Legends @material-ui/core/MenuItem is custom.

import {
  LayerPanel,
  LayerPanelPage,
  LayerPanelHeader,
  LayerPanelContent,
  LayerPanelActions,
  LayerPanelActionRemove } from '@bayer/ol-kit'
import VpnKeyIcon from '@material-ui/icons/VpnKeyIcon'
import MoreHorizIcon from '@material-ui/icons/MoreHorizIcon'
import MenuItem from '@material-ui/core/MenuItem'

return (
  <LayerPanel>
    <LayerPanelPage tabIcon={<VpnKeyIcon />}>
      <LayerPanelHeader
        title='Legends Page'
        avatar={<VpnKeyIcon />}
        actions={
          <LayerPanelActions icon={<MoreHorizIcon />}>
            <LayerPanelActionRemove />
            <MenuItem onClick={this.updateLegends}>Update Legends</MenuItem>
          </LayerPanelActions>
        } />
      <LayerPanelContent>
        Place your legend images here...
      </LayerPanelContent>
    </LayerPanelPage>
  </LayerPanel>
)

image