@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
32 lines • 3.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Sidebar_Basic_Example_1 = require("./examples/Sidebar.Basic.Example");
var Sidebar_Collapsed_Example_1 = require("./examples/Sidebar.Collapsed.Example");
// tslint:disable-next-line:no-var-requires
var SidebarBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Sidebar/examples/Sidebar.Basic.Example.tsx');
// tslint:disable-next-line:no-var-requires
var SidebarCollpasibleExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Sidebar/examples/Sidebar.Collapsed.Example.tsx');
var SidebarPage = /** @class */ (function (_super) {
tslib_1.__extends(SidebarPage, _super);
function SidebarPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
SidebarPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Sidebar', componentName: "SidebarExample", exampleCards: React.createElement("div", null,
React.createElement("div", { className: "sidebar-basic-example" },
React.createElement(example_app_base_1.ExampleCard, { title: "Sidebar Basic, not Collapsible", code: SidebarBasicExampleCode },
React.createElement(Sidebar_Basic_Example_1.SidebarBasicExample, null))),
React.createElement("div", { className: "sidebar-collapsed-example" },
React.createElement(example_app_base_1.ExampleCard, { title: "Sidebar Collapsible", code: SidebarCollpasibleExampleCode },
React.createElement(Sidebar_Collapsed_Example_1.SidebarCollapsibleExample, null)))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [require('!raw-loader!@uifabric/experiments/src/components/Sidebar/Sidebar.types.tsx')] }), overview: React.createElement("div", null,
React.createElement("p", null, "Sidebar navigation component. If the sidebar is collapsible, the collapse button is shown on the top."),
React.createElement("p", null, "The sidebar uses a list of items to render the vertical navigation. Items are rendered as Sidebar buttons by default. If an item has a buttonAs or onRender property, these properties will be used to render the item instead. If not, but a defaultButton property is specified on the sidebar, the default button will be used for button rendering. Items should have an icon and a label if they are used in a collapsible sidebar."),
React.createElement("p", null, "Custom styling for the sidebar is done by passing in a ISidebarStyles object. And example of this can be seen in the basic example below.")), isHeaderVisible: this.props.isHeaderVisible }));
};
return SidebarPage;
}(React.Component));
exports.SidebarPage = SidebarPage;
//# sourceMappingURL=SidebarPage.js.map