pip-webui/pip-webui-controls/samples/toggle_buttons_sample/toggle_buttons.html

HTML5 UI for LOB applications

<h2 class="text-title tm0 bm24">Toogle buttons {{:: 'SAMPLE' | translate }}</h2>
<h3 class="text-subhead2">{{:: 'NOT' | translate }} {{:: 'INITIALIZED' | translate }}</h3>
<pip-toggle-buttons ng-model="type"
                    pip-rebind="true"
                    pip-buttons="buttonsCollection"
                    class="bm16">
</pip-toggle-buttons>

<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-markup">&lt;pip-toggle-buttons ng-model="type"
                    pip-rebind="true"
                    pip-buttons="buttonsCollection"
                    class="bm16"&gt;
&lt;/pip-toggle-buttons&gt;</code>
</pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<h3 class="text-subhead2">{{:: 'INITIALIZED' | translate }}</h3>
<pip-toggle-buttons ng-model="initType"
                    pip-rebind="true"
                    pip-buttons="buttonsCollection2"
                    class="bm16">
</pip-toggle-buttons>

<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
HTML:
<code class="language-markup">&lt;pip-toggle-buttons
                    ng-model="initType"
                    pip-rebind="true"
                    pip-buttons="buttonsCollection2"
                    class="bm16"&gt;
&lt;/pip-toggle-buttons&gt;
</code>
JS:
<code class="language-js">$scope.buttonsCollection2 = [
    {id: 'type 1', name: 'LOW', disabled: false},
    {id: 'type 2', name: 'NORMAL', disabled: false, filled: true},
    {id: 'type 3', name: 'HIGH', disabled: false}
];

$scope.initType = 'type 2';</code>
        </pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<h3 class="text-subhead2">{{:: 'DISABLED' | translate }}</h3>
<pip-toggle-buttons ng-model="initType"
                    pip-rebind="true"
                    ng-disabled="true"
                    pip-buttons="buttonsCollection3"
                    class="bm16">
</pip-toggle-buttons>

<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-markup">&lt;pip-toggle-buttons ng-model="initType"
                    pip-rebind="true"
                    ng-disabled="true"
                    pip-buttons="buttonsCollection3"
                    class="bm16"&gt;
&lt;/pip-toggle-buttons&gt;</code>
</pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<h3 class="text-subhead2">{{:: 'COLORED' | translate }}</h3>
<pip-toggle-buttons ng-model="type"
                    pip-rebind="true"
                    pip-buttons="buttonsColoredCollection"
                    class="bm16">
</pip-toggle-buttons>

<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
HTML:
<code class="language-markup">&lt;pip-toggle-buttons ng-model="type"
                    pip-rebind="true"
                    pip-buttons="buttonsColoredCollection"
                    class="bm16"&gt;
&lt;/pip-toggle-buttons&gt;
</code>
JS:
<code class="language-js">$scope.buttonsColoredCollection = [
    {id: 'type 1', name: 'LOW', disabled: false, backgroundColor: '#F06292'},
    {id: 'type 2', name: 'NORMAL', disabled: false, backgroundColor: '#BA68C8'},
    {id: 'type 3', name: 'HIGH', disabled: false, backgroundColor: '#009688'}
];</code>
</pre>
<md-divider class="tm8 pip-list-divider"></md-divider>
<h3 class="text-subhead2">{{:: 'COLORED' | translate }}, {{:: 'DISABLED' | translate }}</h3>
<pip-toggle-buttons ng-model="type"
                    pip-rebind="true"
                    ng-disabled="true"
                    pip-buttons="buttonsColoredCollection"
                    class="bm16">
</pip-toggle-buttons>

<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
<code class="language-markup">&lt;pip-toggle-buttons ng-model="type"
                    pip-rebind="true"
                    ng-disabled="true"
                    pip-buttons="buttonsColoredCollection"
                    class="bm16"&gt;
&lt;/pip-toggle-buttons&gt;</code>
</pre>