mirror of
https://github.com/grafana/grafana.git
synced 2025-02-12 00:25:46 -06:00
63 lines
2.0 KiB
HTML
63 lines
2.0 KiB
HTML
<navbar icon="fa fa-fw fa-adjust" title="Style Guide" title-url="styleguide">
|
|
</navbar>
|
|
|
|
<div class="page-container">
|
|
<div class="page-header">
|
|
<h1>Style Guide</h1>
|
|
|
|
<a class="btn btn-success" ng-click="ctrl.switchTheme()">
|
|
<i class="fa fa-random"></i>
|
|
Switch theme
|
|
</a>
|
|
<a class="btn btn-inverse" ng-click="ctrl.switchTheme()">
|
|
<i class="fa fa-refresh"></i>
|
|
Reload
|
|
</a>
|
|
|
|
<div class="page-header-tabs">
|
|
<ul class="gf-tabs">
|
|
<li class="gf-tabs-item" ng-repeat="page in ctrl.pages">
|
|
<a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" ng-if="ctrl.page.colors">
|
|
<ul>
|
|
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
|
|
<strong>${{color.name}}</strong>
|
|
<em>{{color.value}}</em>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-pane" ng-if="ctrl.page.buttons">
|
|
<div ng-repeat="variant in ctrl.buttonVariants" class="row">
|
|
<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
|
|
<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
|
|
btn{{variant}}{{buttonName}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
|
|
<div ng-repeat="icon in ctrl.icons" class="col-lg-1 col-md-2 col-sm-2 col-xs-4">
|
|
<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane style-guide-plugin-authoring" ng-if="ctrl.page.plugins">
|
|
<p>From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.</p>
|
|
<p>More information about plugin development can be found at <a href="http://docs.grafana.org/plugins/developing/development/" target="_blank">docs.grafana.org</a></p>
|
|
</div>
|
|
|
|
<div class="tab-pane" ng-if="ctrl.page.forms">
|
|
forms
|
|
</div>
|
|
|
|
</div>
|
|
|