@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
30 lines • 2.88 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
import { SidebarBasicExample } from './examples/Sidebar.Basic.Example';
import { SidebarCollapsibleExample } from './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(ComponentPage, { title: 'Sidebar', componentName: "SidebarExample", exampleCards: React.createElement("div", null,
React.createElement("div", { className: "sidebar-basic-example" },
React.createElement(ExampleCard, { title: "Sidebar Basic, not Collapsible", code: SidebarBasicExampleCode },
React.createElement(SidebarBasicExample, null))),
React.createElement("div", { className: "sidebar-collapsed-example" },
React.createElement(ExampleCard, { title: "Sidebar Collapsible", code: SidebarCollpasibleExampleCode },
React.createElement(SidebarCollapsibleExample, null)))), propertiesTables: React.createElement(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));
export { SidebarPage };
//# sourceMappingURL=SidebarPage.js.map