@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
55 lines • 4.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var TestImages_1 = require("@uifabric/experiments/lib/common/TestImages");
var styling_1 = require("@uifabric/styling");
var Persona_1 = require("../Persona");
var sectionGap = 32;
var headingGap = 16;
var personaCoinGap = 12;
var verticalPersonaStackClassName = styling_1.mergeStyles({ display: 'flex', flexDirection: 'row' });
var VerticalPersonaStack = function (props) { return React.createElement("div", { className: verticalPersonaStackClassName }, props.children); };
var VerticalPersonaExample = /** @class */ (function (_super) {
tslib_1.__extends(VerticalPersonaExample, _super);
function VerticalPersonaExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
VerticalPersonaExample.prototype.render = function () {
return (React.createElement(office_ui_fabric_react_1.Stack, { gap: sectionGap },
React.createElement(office_ui_fabric_react_1.Stack, { gap: headingGap, padding: 8 },
React.createElement(office_ui_fabric_react_1.Stack, { gap: personaCoinGap },
React.createElement(office_ui_fabric_react_1.Text, null, "Basic Usage"),
React.createElement(VerticalPersonaStack, null,
React.createElement(Persona_1.Persona, { vertical: true, text: "Sukhnam Chander", secondaryText: "Principal Program manager" }),
React.createElement(Persona_1.Persona, { vertical: true, text: "Kevin Jameson", secondaryText: "Professional traveller" }),
React.createElement(Persona_1.Persona, { vertical: true, text: "\u738B\u529B", secondaryText: "Principal Program manager" }),
React.createElement(Persona_1.Persona, { vertical: true, text: "Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.", coin: { imageUrl: TestImages_1.PersonaTestImages.personMale } }),
React.createElement(Persona_1.Persona, { vertical: true, text: "Christian Duncan Claude Sandra Alvin Matilde Eriksson", secondaryText: "Director of global strategy management for the entire worldwide organization", coin: { imageUrl: TestImages_1.PersonaTestImages.personMale } }))),
React.createElement(office_ui_fabric_react_1.Stack, { gap: personaCoinGap },
React.createElement(office_ui_fabric_react_1.Text, null, "When passing coinProps"),
React.createElement(VerticalPersonaStack, null,
React.createElement(Persona_1.Persona, { vertical: true, text: "Eline Page", secondaryText: "eSports commentator", coin: { presence: 4 } }),
React.createElement(Persona_1.Persona, { vertical: true, text: "\u8D75\u4E3D\u9896", coin: { imageUrl: TestImages_1.PersonaTestImages.personFemale } }),
React.createElement(Persona_1.Persona, { vertical: true, text: "Kevin Jameson", coin: { imageUrl: TestImages_1.PersonaTestImages.personMale } }))),
React.createElement(office_ui_fabric_react_1.Stack, { gap: personaCoinGap },
React.createElement(office_ui_fabric_react_1.Text, null, "Tokens!"),
React.createElement(VerticalPersonaStack, null,
React.createElement(Persona_1.Persona, { vertical: true, text: "Sukhnam Chander", secondaryText: "Principal Program manager", tokens: {
verticalPersonaWidth: 200,
fontFamily: 'cursive',
horizontalTextPadding: 10,
primaryTextPaddingTop: '20px',
primaryTextFontSize: '22px',
primaryTextFontWeight: 800,
secondaryTextFontSize: '18px',
secondaryTextPaddingTop: '12px'
} }),
React.createElement(Persona_1.Persona, { vertical: true, text: "Kevin Jameson", secondaryText: "Professional traveller", tokens: { fontFamily: 'monospace' } }),
React.createElement(Persona_1.Persona, { vertical: true, text: "\u738B\u529B", secondaryText: "Principal Program manager", tokens: { primaryTextFontWeight: 100, secondaryTextFontSize: '20px' } }))))));
};
return VerticalPersonaExample;
}(React.Component));
exports.VerticalPersonaExample = VerticalPersonaExample;
//# sourceMappingURL=VerticalPersona.Example.js.map