office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.34 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Slider,\r\n Facepile,\r\n IFacepileProps\r\n} from '../../../../index';\r\nimport { facepilePersonas } from './FacepileExampleData';\r\nimport './Facepile.Examples.scss';\r\n\r\nexport interface IFacepileBasicExampleState {\r\n numberOfFaces: any;\r\n}\r\n\r\nexport class FacepileBasicExample extends React.Component<any, IFacepileBasicExampleState> {\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n numberOfFaces: 1\r\n };\r\n }\r\n\r\n public render() {\r\n let { numberOfFaces } = this.state;\r\n let facepileProps: IFacepileProps = {\r\n personas: facepilePersonas.slice(0, numberOfFaces),\r\n chevronButtonProps: {\r\n onClick: (ev: React.MouseEvent<HTMLButtonElement>) =>\r\n alert('Down arrow icon clicked')\r\n }\r\n };\r\n\r\n return (\r\n <div className={'ms-FacepileExample'}>\r\n <Facepile {...facepileProps} />\r\n <Slider\r\n label='Number of Personas:'\r\n min={1}\r\n max={8}\r\n step={1}\r\n showValue={true}\r\n value={this.state.numberOfFaces}\r\n onChange={value => this.setState({ numberOfFaces: value })}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n"; });