UNPKG

@uifabric/experiments

Version:

Experimental React components for building experiences for Office 365.

44 lines 3.44 kB
import * as tslib_1 from "tslib"; import * as React from 'react'; import { ExampleCard, ComponentPage } from '@uifabric/example-app-base'; import { SlotsExample } from './examples/Slots.Example'; import { SlotsAsyncExample } from './examples/Slots.Async.Example'; import { SlotsRootExample } from './examples/Slots.Root.Example'; import { SlotsStackExample } from './examples/Slots.Stack.Example'; import { SlotsIconExample } from './examples/Slots.Icon.Example'; import { SlotsContentExample } from './examples/Slots.Content.Example'; import { SlotsStyledExample } from './examples/Slots.Styled.Example'; var SlotsExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Example.tsx'); var SlotsAsyncExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Async.Example.tsx'); var SlotsRootExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Root.Example.tsx'); var SlotsStackExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Stack.Example.tsx'); var SlotsIconExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Icon.Example.tsx'); var SlotsContentExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Content.Example.tsx'); var SlotsStyledExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Styled.Example.tsx'); var SlotsPage = /** @class */ (function (_super) { tslib_1.__extends(SlotsPage, _super); function SlotsPage() { return _super !== null && _super.apply(this, arguments) || this; } SlotsPage.prototype.render = function () { return (React.createElement(ComponentPage, { title: "Slots", componentName: "Slots", overview: React.createElement("div", null, React.createElement("p", null, "Slots are a method of combining all of the various ways that subcomponents can be interacted into one prop.")), exampleCards: React.createElement("div", null, React.createElement(ExampleCard, { title: "All Slot Types", code: SlotsExampleCode }, React.createElement(SlotsExample, null)), React.createElement(ExampleCard, { title: "Async Render Functions", code: SlotsAsyncExampleCode }, React.createElement(SlotsAsyncExample, null)), React.createElement(ExampleCard, { title: "Button Root Slot", code: SlotsRootExampleCode }, React.createElement(SlotsRootExample, null)), React.createElement(ExampleCard, { title: "Button Stack Slot", code: SlotsStackExampleCode }, React.createElement(SlotsStackExample, null)), React.createElement(ExampleCard, { title: "Button Icon Slot", code: SlotsIconExampleCode }, React.createElement(SlotsIconExample, null)), React.createElement(ExampleCard, { title: "Button Content Slot", code: SlotsContentExampleCode }, React.createElement(SlotsContentExample, null)), React.createElement(ExampleCard, { title: "Button Styled", code: SlotsStyledExampleCode }, React.createElement(SlotsStyledExample, null))), isHeaderVisible: this.props.isHeaderVisible })); }; return SlotsPage; }(React.Component)); export { SlotsPage }; //# sourceMappingURL=SlotsPage.js.map