Tabs

案例

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'>
    <link rel="stylesheet" href='../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css'>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
    <style type="text/css">
        form.tab-form-demo .tab-pane {
            margin: 20px 20px;
        }
    </style>
    <script>
        angular.module('myApp',['ui.bootstrap'])
            .controller('TabsDemoCtrl', function ($scope, uibDateParser) {
                $scope.tabs = [
                    { title:'Dynamic Title 1', content:'Dynamic content 1' },
                    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
                ];

                $scope.alertMe = function() {
                    setTimeout(function() {
                        $window.alert('You\'ve selected the alert tab!');
                    });
                };

                $scope.model = {
                    name: 'Tabs'
                };
            });
    </script>
</head>
<body>
<div ng-controller="TabsDemoCtrl">
    <p>Select a tab by setting active binding to true:</p>
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>
        <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>
    </p>
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
    </p>
    <hr />

    <uib-tabset active="active">
        <uib-tab index="0" heading="Static title">Static content</uib-tab>
        <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
            {{tab.content}}
        </uib-tab>
        <uib-tab index="3" select="alertMe()">
            <uib-tab-heading>
                <i class="glyphicon glyphicon-bell"></i> Alert!
            </uib-tab-heading>
            I've got an HTML heading, and a select callback. Pretty cool!
        </uib-tab>
    </uib-tabset>

    <hr />

    <uib-tabset active="activePill" vertical="true" type="pills">
        <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
        <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
    </uib-tabset>

    <hr />

    <uib-tabset active="activeJustified" justified="true">
        <uib-tab index="0" heading="Justified">Justified content</uib-tab>
        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
    </uib-tabset>

    <hr />

    Tabbed pills with CSS classes
    <uib-tabset type="pills">
        <uib-tab heading="Default Size">Tab 1 content</uib-tab>
        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
    </uib-tabset>

    <hr />

    Tabs using nested forms:
    <form name="outerForm" class="tab-form-demo">
        <uib-tabset active="activeForm">
            <uib-tab index="0" heading="Form Tab">
                <ng-form name="nestedForm">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" required ng-model="model.name"/>
                    </div>
                </ng-form>
            </uib-tab>
            <uib-tab index="1" heading="Tab One">
                Some Tab Content
            </uib-tab>
            <uib-tab index="2" heading="Tab Two">
                More Tab Content
            </uib-tab>
        </uib-tabset>
    </form>
    Model:
    <pre>{{ model | json }}</pre>
    Nested Form:
    <pre>{{ outerForm.nestedForm | json }}</pre>
</div>
</body>
</html>

效果

uib-tabset 配置

active (Default: Index of first tab) - 選項卡索引。設置這個現有選項卡的標簽索引。

<button type="button" class="btn btn-default btn-sm" ng-click="uibTabDemo = 1">點擊后切換到two</button>
    <uib-tabset active="uibTabDemo">
        <uib-tab index="0" heading="one">
            one
        </uib-tab>
        <uib-tab index="1" heading="two">
            two
        </uib-tab>
    </uib-tabset>

justified $ (Default: false) -標簽填補容器的寬度受否一致。

<uib-tabset active="activeJustified" justified="true">
        <uib-tab index="0" heading="Justified">Justified content</uib-tab>
        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
        <uib-tab index="3" heading="Long ">Long Labeled content</uib-tab>
        <uib-tab index="4" heading="Justified">Justified content</uib-tab>
    </uib-tabset>

<uib-tabset active="activeJustified" justified="false">
        <uib-tab index="0" heading="Justified">Justified content</uib-tab>
        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
        <uib-tab index="3" heading="Long ">Long Labeled content</uib-tab>
        <uib-tab index="4" heading="Justified">Justified content</uib-tab>
    </uib-tabset>

template-url (Default: uib/template/tabs/tabset.html) - 一個URL代表組件使用的模板位置。

type (Defaults: tabs) - 導航類型。可能的值是“tabs”和“pills”。以下是pills類型

<uib-tabset type="pills">
        <uib-tab heading="Default Size">Tab 1 content</uib-tab>
        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
    </uib-tabset>

vertical $ (Default: false) - 標簽是否垂直堆疊顯示（最好設置type為pills，因為ui-bootstrap並沒有對對垂直顯示做樣式調整）。

<uib-tabset active="activePill" vertical="true" type="pills">
        <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
        <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
    </uib-tabset>

uib-tab 配置

classes $ - 一個可選的字符串，內容為空格分隔的CSS類.這個類是作用到標簽上的，而不是內容上的

Tabbed pills with CSS classes
    <uib-tabset type="pills">
        <uib-tab heading="Default Size">Tab 1 content</uib-tab>
        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
    </uib-tabset>

deselect() $ - 當標簽被激活時，一個可選的表達式
disable $ (Default: false) - 禁用選項卡

heading - 標題文本

<uib-tabset>
        <uib-tab index="0" heading="one">
            one
        </uib-tab>
        <uib-tab index="1" heading="two">
            two
        </uib-tab>
    </uib-tabset>

index - 標簽索引。必須是唯一的數字或字符串。

select() $ - 一個可選的表達式，當標簽被激活時觸發。

$scope.tabs = [
                    { title:'Dynamic Title 1', content:'Dynamic content 1' },
                    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
                ];

                $scope.alertMe = function() {
                    console.log('demo')
                };

template-url (Default: uib/template/tabs/tab.html) - 一個URL的位置代表使用選項卡標題的模板。

Tabset heading

如果使用uib-tabset字符串標題無法滿足需求,您也可以使用一個uib-tab-heading元素。也可以使用HTML。

<uib-tabset active="active">
        <uib-tab index="0" heading="Static title">Static content</uib-tab>
        <uib-tab index="1" select="alertMe()">
            <uib-tab-heading>
                <i class="glyphicon glyphicon-bell"></i> Alert!
            </uib-tab-heading>
            I've got an HTML heading, and a select callback. Pretty cool!
        </uib-tab>
    </uib-tabset>

已知的問題

要在標簽中使用可點擊元素（例如a標簽），你必須改為使用div元素，而不是a元素，並設置相應的樣式。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 angular-ui-bootstrap插件API - Pagination angular-ui-bootstrap彈出框的使用（一） angular-ui-bootstrap各版本下載地址 angular-ui-bootstrap 日歷控件國際化 Bootstrap之javascript插件---Togglable tabs（標簽頁） AngularJs的UI組件ui-Bootstrap分享（六）——Tabs AngularJs的UI組件ui-Bootstrap---tabs控件 Angular -ui - BootStrap組件的解釋以及使用 bootstrap 關閉tabs angular-bootstrap ui-date組件問題總結