pip-webui/pip-webui-controls/cordova/www/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>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-toggle-buttons ng-model="type"
                                pip-rebind="true"
                                pip-buttons="buttonsCollection"</strong>
                                class="bm16"&gt;
            &lt;/<strong>pip-toggle-buttons</strong>&gt;
        </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>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
    <strong>HTML:</strong>

            &lt;<strong>pip-toggle-buttons
                                ng-model="initType"</strong>
                                pip-rebind="true"
                                <strong>pip-buttons="buttonsCollection2"</strong>
                                class="bm16"&gt;
            &lt;/<strong>pip-toggle-buttons</strong>&gt;

    <strong>JS:</strong>

            <strong>$scope.buttonsCollection2</strong> = [
                {id: 'type 1', name: 'LOW', disabled: false},
                {id: 'type 2', name: 'NORMAL', disabled: false, <strong>filled: true</strong>},
                {id: 'type 3', name: 'HIGH', disabled: false}
            ];

            <strong>$scope.initType = 'type 2'</strong>;
        </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>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-toggle-buttons</strong> ng-model="initType"
                                pip-rebind="true"
                                <strong>ng-disabled="true"</strong>
                                pip-buttons="buttonsCollection3"
                                class="bm16"&gt;
            &lt;/<strong>pip-toggle-buttons</strong>&gt;
        </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>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
    <strong>HTML:</strong>

            &lt;<strong>pip-toggle-buttons</strong> ng-model="type"
                                pip-rebind="true"
                                <strong>pip-buttons="buttonsColoredCollection"</strong>
                                class="bm16"&gt;
            &lt;/<strong>pip-toggle-buttons</strong>&gt;

    <strong>JS:</strong>

            <strong>$scope.buttonsColoredCollection</strong> = [
                {id: 'type 1', name: 'LOW', disabled: false, <strong>backgroundColor: '#F06292'</strong>},
                {id: 'type 2', name: 'NORMAL', disabled: false, <strong>backgroundColor: '#BA68C8'</strong>},
                {id: 'type 3', name: 'HIGH', disabled: false, <strong>backgroundColor: '#009688'</strong>}
            ];
        </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>

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