私は、左にタブナビゲーションが表示されているタブを上から下に表示します。これはAngular Materialライブラリで実現できますか?角材mdTabs:縦のタブを使用できますか?
8
A
答えて
3
This codepenRahul Sagoreは、特にAngularではなく、バニラ素材を使用しますが、まさにあなたが望むものです。私はあなたと同じことを探していた。それは残念ですが、材料はこれを提供しませんが、私はそれが彼らの原則に反していかに物質が広すぎるかを見ることができます。
これは、カスタムCSS(おそらくオーバーライド、わかりません)と特定のマテリアルクラス名の使用で構成されています。以下は内容をスニペットに貼り付けたものです。
それがこのポストの制限空間でのタブの下にコンテンツをラップしませんので、私は6-col
に10-col
からコンテンツ1を変更するので、私はmdl-cell--n-col
クラスとの問題がありました。おそらく、自分でそれを修正するか、それをスクラップし、マテリアルスタイルを使用する方法を使用する必要があります。同様に、私は.hollow-circle
のスパンが何をしているのか分からないので、おそらくそれらは必要ではありません。
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid rgba(10, 11, 49, 0.20);
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span>
Tab 1
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 2
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 3
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
関連する問題
- 1. 角材2タブ
- 2. 角材料タブ
- 3. Googleジオグラフが角材内部にレンダリングされないmdTabs
- 4. タブ使用ボタンは、私は、角+角度材料を使用しています
- 5. 角材料MD-タブのスクロールコンテンツ
- 6. 角材2をIonicで使用できますか?
- 7. JavaScriptは角度素材2を使用できますか?
- 8. 角材タブ遅延ロード
- 9. 角度4材質タブのインデックスからのタブのインデックス
- 10. 角度のある素材で縦横に整列する
- 11. 角材料を使用しない角材チップの効果
- 12. 角材ckeditorの2つのタブ
- 13. 角材mdアイコンの使用
- 14. 角度2の材料タブとngForm
- 15. 角材2タブ:ボディトランジションの削除
- 16. 角材2のmd-iconで材質アイコンを使用
- 17. タブの内側の角度の材料タブ問題
- 18. 角材ダイアログモーダルでフォームを使用
- 19. 角材md-buttonを縦に整列する方法
- 20. 角材:マット・グリッド・タイルに内容を縦に並べる
- 21. 角度のある材質md-tabはタブのクリックをシミュレートしますか?
- 22. 角度材質:選択ボックスの値は角度素材を使用した
- 23. ng-repeatで使用できない角形材料指令
- 24. 角度2の素材アイコンの使用
- 25. 角度付きルーティング用の素材コンポーネント
- 26. 角材タブのスクロール内容が機能していません
- 27. 角材 - md-autocompleteを開きます。
- 28. 角度材質のチェックボックス付きの標準入力を使用
- 29. 角度のある素材で同じ内容のタブ
- 30. パイプ使用時の角材誤差
@udayaこんにちは、あなたはこれまで任意の解決策を見つけましたか?私はまた、mdTabsを垂直に必要とします。 – DShah
私はui-routerを使いました。私が見つけることができる直接の要素はありません。参考[this](https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router) –