office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.2 kB
JavaScript
module.exports = "import * as React from 'react';\nimport {\n Persona,\n PersonaSize,\n PersonaPresence,\n Checkbox\n} from '../../../../index';\n\nconst examplePersona = {\n imageUrl: './images/persona-female.png',\n imageInitials: 'AL',\n primaryText: 'Annie Lindqvist',\n secondaryText: 'Software Engineer',\n tertiaryText: 'In a meeting',\n optionalText: 'Available at 4:00pm'\n};\n\nexport class PersonaBasicExample extends React.Component<React.Props<PersonaBasicExample>, { renderPersonaDetails?: boolean; }> {\n constructor() {\n super();\n this.state = {\n renderPersonaDetails: true\n };\n }\n\n public render() {\n let { renderPersonaDetails } = this.state;\n\n return (\n <div>\n <div>\n <Checkbox\n label='Include persona details'\n checked={ renderPersonaDetails }\n onChange={ (ev, isChecked) => { this.setState({ renderPersonaDetails: isChecked }); }} />\n </div>\n <Persona\n { ...examplePersona }\n size={ PersonaSize.tiny }\n presence={ PersonaPresence.offline }\n hidePersonaDetails={ !renderPersonaDetails }\n />\n <Persona\n { ...examplePersona }\n size={ PersonaSize.extraSmall }\n presence={ PersonaPresence.online }\n hidePersonaDetails={ !renderPersonaDetails }\n />\n <Persona\n { ...examplePersona }\n size={ PersonaSize.small }\n presence={ PersonaPresence.away }\n hidePersonaDetails={ !renderPersonaDetails }\n />\n <Persona\n { ...examplePersona }\n hidePersonaDetails={ !renderPersonaDetails }\n presence={ PersonaPresence.busy }\n />\n <Persona\n { ...examplePersona }\n size={ PersonaSize.large }\n presence={ PersonaPresence.dnd }\n hidePersonaDetails={ !renderPersonaDetails }\n />\n <Persona\n { ...examplePersona }\n size={ PersonaSize.extraLarge }\n presence={ PersonaPresence.blocked }\n hidePersonaDetails={ !renderPersonaDetails }\n />\n </div>\n );\n }\n}\n";