office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.19 kB
JavaScript
define([], function() { return "import * as React from 'react';\nimport './Layer.Example.scss';\nimport {\n Checkbox,\n Layer,\n LayerHost\n} from '../../../../index';\n\nexport class LayerHostedExample extends React.Component<any, any> {\n constructor() {\n super();\n this.state = { showLayer: false };\n }\n\n public render() {\n let { showLayer } = this.state;\n let content = (\n <div className='LayerExample-content ms-u-scaleUpIn100'>\n This is example layer content.\n </div>\n );\n\n return (\n <LayerHost className='LayerExample-customHost'>\n <p>\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.\n </p>\n\n <Checkbox\n label='Wrap the content box belowed in a Layer'\n checked={ showLayer }\n onChange={ (ev, checked) => this.setState({ showLayer: checked }) } />\n\n { showLayer ? <Layer>{ content }</Layer> : content }\n\n <div className='LayerExample-nonLayered'>I am normally below the content.</div>\n </LayerHost>\n );\n }\n}\n"; });