pip-webui
Version:
HTML5 UI for LOB applications
132 lines (118 loc) • 5.78 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Side Nav Sample</title>
<link rel="stylesheet" href="../../lib/pip-webui-lib.css"/>
<link rel="stylesheet" href="../../lib/pip-webui-css.css"/>
<link rel="stylesheet" href="../../lib/pip-webui-layouts.css"/>
<link rel="stylesheet" href="../../dist/pip-webui-nav.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="../../node_modules/prismjs/themes/prism.css">
<link rel="stylesheet" href="../../node_modules/pip-webui-tasks/node_modules/prismjs/themes/prism.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script src="../../lib/pip-webui-lib.js"></script>
<script src="../../lib/pip-webui-core.js"></script>
<script src="../../lib/pip-webui-layouts.js"></script>
<script src="../../dist/pip-webui-nav.js"></script>
<script src="index.js"></script>
<script src="../../node_modules/prismjs/prism.js"></script>
<script src="../../node_modules/pip-webui-tasks/node_modules/prismjs/prism.js"></script>
</head>
<body ng-app="app" ng-controller="appController" ng-if="!$reset" md-theme="{{ $theme || 'blue' }}"
class="{{ $theme || 'blue' }} pip-main layout-column">
<pip-main class="pip-main">
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="menu"
ng-click="onToggleSideNav()">
<md-icon md-svg-icon="icons:menu"></md-icon>
</md-button>
<div class="flex-var text-overflow">Side Nav {{ 'SAMPLE' | translate }}</div>
<div class="flex-fixed">
<md-menu md-position-mode="target-right target">
<span ng-click="$mdOpenMenu()"
aria-label="language selection">
{{ $language | translate}}
<md-icon md-svg-icon="icons:triangle-down"></md-icon>
</span>
<md-menu-content width="3">
<md-menu-item ng-repeat="lang in languages">
<md-button ng-click="onLanguageClick(lang)">{{lang | translate}}</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</div>
</md-toolbar>
<pip-sidenav>
</pip-sidenav>
<pip-main-body class="layout-column pip-main-body">
<md-toolbar class="pip-appbar-ext" >
</md-toolbar>
<pip-document class="pip-document" >
<div class="pip-menu-container">
<div class="pip-content-container p24">
<div>
<h2 class="text-title tm0 bm24">Side Nav {{ 'SAMPLE' | translate }}</h2>
<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE_TO_CONFIGURE_AND_DISPLAY' | translate}}</h3>
<strong>JS:</strong>
<code class="language-js">
<strong>pipSideNavProvider.sections</strong>([
{
links: [
{title: 'Dashboard', url: '/dashboard?party_id=:party_id'},
{title: 'About', url: '/about?party_id=:party_id'}
]
},
{
title: 'Get',
links: [
{title: 'Incoming', icon: 'icons:folder', url: '/ideas?party_id=:party_id'},
{title: 'Big Picture', icon: 'icons:goal', url: '/unfinished?party_id=:party_id'},
{title: 'Events', icon: 'icons:star', url: '/ultimate_todo?party_id=:party_id'}
]
},
{
links: [
{title: 'Help', url: '/help'},
{title: 'Support', url: '/support?party_id=:user_id'},
{title: 'Settings', url: '/settings?party_id=:party_id'}
]
}
]);
</code>
<strong>HTML:</strong>
<code class="language-markup">
<<strong>pip-sidenav</strong>></<strong>pip-sidenav</strong>></code></pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<div>
<md-button class="lm0 md-raised md-accent flat" ng-click="onOpenSideNav()">{{ 'OPEN' | translate }} Side Nav</md-button>
</div>
<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-js"><strong>pipSideNav.open</strong>()</code></pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<div>
<md-button class="lm0 md-raised md-accent flat" ng-click="onCloseSideNav()">{{ 'CLOSE' | translate }} Side Nav</md-button>
</div>
<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-js"><strong>pipSideNav.close</strong>()</code></pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<div>
<md-button class="lm0 md-raised md-accent flat" ng-click="onToggleSideNav()">{{ 'TOGGLE' | translate }} Side Nav</md-button>
</div>
<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-js"><strong>pipSideNav.toggle</strong>()</code></pre>
</div>
</div>
</div>
</pip-document>
</pip-main-body>
</pip-main>
</body>
</html>