0
內側的位置，我定製了PrimeNg TabView，爲了實現這個包裹它的自定義組件內：角2：以編程方式DIV覆蓋
正如你可以看到TabView的內容具有overflow-x: hidden所以它可以看起來更好，允許用戶在隱藏的標籤之間導航我已經添加了兩個按鈕，tabview的每一側。
現在我正在嘗試開發那些按鈕點擊功能，我不知道如何實現這一點。
這是我的組件看起來像：
<div class="wrapper">
<a id="back" class="ripple" [style.backgroundColor]="ui.currentThemeBackground"><i class="material-icons">chevron_left</i></a>
<p-tabView styleClass="tab-container" [style]="{'background-color':ui.currentThemeBackground}">
<p-tabPanel *ngFor="let tab of store.linhaTempo | async; let i = index; "
[id]="index" [header]="tab.titulo" [selected]="tab.selecionada"></p-tabPanel>
</p-tabView>
<a id="forward" class="ripple" [style.backgroundColor]="ui.currentThemeBackground"><i class="material-icons">chevron_right</i></a>
</div>
linha-tempo .wrapper {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
position: fixed;
top: 55px;
width: 100%;
}
linha-tempo .tab-container {
border: none !important;
margin: 0 auto;
width: calc(100% - 80px);
border-radius: 0px;
}
linha-tempo #back, linha-tempo #forward {
width: 40px;
position: fixed;
top: 55px;
line-height: 33px;
text-align: center;
cursor: pointer;
}
linha-tempo #back {
left: 0px;
}
linha-tempo #forward {
right:0px;
}
linha-tempo #back i, linha-tempo #forward i {
line-height: 2;
color: white;
}
linha-tempo .ui-tabview-panel {
display: none !important;
}
linha-tempo .ui-tabview-nav, linha-tempo .ui-tabview-nav > li.ui-state-active {
border-bottom: none !important;
background-color: transparent !important;
line-height: 1.8;
}
linha-tempo .ui-tabview-nav {
color: rgba(255, 255, 255, 0.6);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
linha-tempo .ui-tabview-nav > li {
border: none !important;
width: 150px;
border-radius: 0px 0px 0px 0px !important;
-webkit-border-radius: 0px 0px 0px 0px !important;
-moz-border-radius: 0px 0px 0px 0px !important;
}
linha-tempo .ui-tabview-nav > li.ui-state-active {
color: white;
}
linha-tempo .ui-tabview-nav a {
color: rgba(255, 255, 255, 0.7) !important;
width: 100%;
box-sizing: border-box;
text-align: center;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
linha-tempo .ui-tabview-nav > li.ui-state-active a {
color: white !important;
border-bottom: 2px solid white;
cursor: default !important;
}
body .ui-tabview .ui-tabview-nav > li.ui-state-hover {
background-color: transparent !important;
}
歡迎任何幫助
在你的js上點擊前進。你可以破解tabview的定位或者使用變換，邊距等來移動它。你能告訴我們你的JavaScript代碼嗎？所以，我們可以在您的代碼中看到錯誤。謝謝！！ –
@HermLuna你好！對不起，但我還沒有執行任何東西，我不知道如何以適當的方式做到這一點..其實我正在尋找建議如何做到這一點嘿嘿 –
阿布舍克的答案是好的。您需要使用的所有方法都在他/ w3演示中。 –