office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.86 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 Toggle,\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 = {\r\n showLayer: false,\r\n showHost: true\r\n };\r\n }\r\n\r\n public render() {\r\n let { showLayer, showHost} = 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 <div>\r\n <Toggle\r\n label='Show host'\r\n checked={ showHost }\r\n onChanged={ checked => this.setState({ showHost: checked }) } />\r\n\r\n { showHost && (\r\n <LayerHost id='layerhost1' className='LayerExample-customHost' />\r\n ) }\r\n\r\n <p id='foo'>\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='Render the box below in a Layer and target it at hostId=layerhost1'\r\n checked={ showLayer }\r\n onChange={ (ev, checked) => this.setState({ showLayer: checked }) } />\r\n\r\n { showLayer ? (\r\n <Layer\r\n hostId='layerhost1'\r\n onLayerDidMount={ () => console.log('didmount') }\r\n onLayerWillUnmount={ () => console.log('willunmount') }\r\n >\r\n { content }\r\n </Layer>\r\n ) : content }\r\n\r\n <div className='LayerExample-nonLayered'>I am normally below the content.</div>\r\n\r\n </div>\r\n );\r\n }\r\n}\r\n"; });