角度材料で

Question

を働いていないMD-次のボタン私は私が怒鳴るようmd-tabsのCSSをoverdidタブをカスタマイズしたい、角度の素材に新たなんだ：

.md-tabs.md-default-theme .md-tab, md-tabs .md-tab { 
    background-color : white !important; 
    margin-right:1em; 
} 

と私のコードのHTMLは次のとおりです。

<md-content> 
    <md-tabs md-dynamic-height="" md-border-bottom="" style='border-radius: 3px 3px 0 0; !important'> 
    <md-tab ng-repeat="itemTab in vm.tabs" label="{{itemTab.label}}" ng-if="vm.showedTabs.indexOf(itemTab.id) > -1"> 
     <div ng-include="'main.html'"></div><!--ici on insert nos pages de workflow--> 
    </md-tab> 
    </md-tabs> 
</md-content> 
<md-button class="md-raised md-primary" ng-click="vm.addNewTabs()">Add new tabs</md-button> 

vm.addNewTabs()という名前の関数は、動的に新しいタブを追加するために使用され、それが仕事の罰金です。私がcssクラスをオーバーライドするとき、問題はmd-next-buttonは動作しませんが、表示されますが動作しません。margin-right:1em;をすべて削除すれば問題ありません。

これはなぜ表示されるのですか？

Answer 1

md-next-buttonは、Angular Material内のcanPageForward関数を呼び出して、ボタンを有効にするかどうかを決定します。サイズを計算するときに

function canPageForward() { 
    var lastTab = elements.tabs[ elements.tabs.length - 1 ]; 
    return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth + 
     ctrl.offsetLeft; 
    } 

はどうやらカスタムCSSを考慮しないと、この関数はそのためのボタンを無効に、falseを返している：この機能は、次のようになります。

Answer 2

私はあなたがこのためにスニペットやビンを作成することができます

md-tabs-canvas { md-pagination-wrapper, md-tabs-dummy-wrapper { white-space: nowrap; md-tab-item, md-dummy-tab { float: none; display: inline-block; } } }