office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.27 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport './Layer.Example.scss';\r\nimport {\r\n Checkbox,\r\n Layer,\r\n LayerHost\r\n} from '../../../../index';\r\n\r\nexport class LayerHostedExample extends React.Component<any, any> {\r\n constructor() {\r\n super();\r\n this.state = { showLayer: false };\r\n }\r\n\r\n public render() {\r\n let { showLayer } = this.state;\r\n let content = (\r\n <div className='LayerExample-content ms-u-scaleUpIn100'>\r\n This is example layer content.\r\n </div>\r\n );\r\n\r\n return (\r\n <LayerHost className='LayerExample-customHost'>\r\n <p>\r\n In some cases, you may need to contain layered content within an area. Wrap the area with a LayerHost, and it will render content at the end of host's area.\r\n </p>\r\n\r\n <Checkbox\r\n label='Wrap the content box belowed in a Layer'\r\n checked={ showLayer }\r\n onChange={ (ev, checked) => this.setState({ showLayer: checked }) } />\r\n\r\n { showLayer ? <Layer>{ content }</Layer> : content }\r\n\r\n <div className='LayerExample-nonLayered'>I am normally below the content.</div>\r\n </LayerHost>\r\n );\r\n }\r\n}\r\n"; });