2016-07-18 3 views
2

기본 탭 컬렉션이 있습니다. 단추로 작동하며 실제 콘텐츠가 없습니다.각도 재질 탭 위에 잉크 막대가 있습니다.

<md-tabs md-align-tabs="bottom"> 
    <md-tab>Canvas 1</md-tab> 
    <md-tab>Canvas 2</md-tab> 
    <md-tab>Canvas 3</md-tab> 
    <md-tab>Canvas 4</md-tab> 
</md-tabs> 

페이지 하단의 탭 모음을 사용하려고합니다. 잉크 막대를 아래쪽이 아닌 탭 모음 맨 위로 이동하는 방법에 대한 아이디어가 있습니까?

md-align-tabs 내 테스트에서 잉크 막대의 위치가 변경되지 않습니다. 순수한 CSS로 솔루션을 식별 할 수 없었습니다.

+0

힌트 : 어쩌면 탭 대신 새 탐색 모음을 사용할 수 있습니다. https://material.angularjs.org/latest/demo/navBar – kuhnroyal

답변

2

md-pagination-wrapper CSS 값을 덮어 쓰려고합니다. 나는 그것이 정직하게 영향을 미친다 그 밖의 무엇을 모르기 때문에 나는 세계적으로 그 일을 권하고 싶지 않다하지만

md-pagination-wrapper { 
height: 2px; 
... 
} 

로 변경하는 경우 당신은 당신이 찾고있는 효과를 얻을 것이다. 여기에 코펜 핀이 있습니다 (예 : http://codepen.io/anon/pen/vKdkzj). 나는 당신이 세계적으로 무엇인가를 깨뜨리지 않기 때문에 그것에 커스텀 오버라이드 클래스 나 id를 넣을 것이다.

사용자 정의 재정의이 같은 것을 볼 것입니다 무슨의 예 -

이 탭에서 사용자 정의 ID 또는 클래스를 넣어 : 사용자 ID와 MD-매김-래퍼를 대상으로

<md-tabs md-align-tabs="bottom" id="ink-top-fix"> 

사용 (또는 클래스를 선택하십시오)

#ink-top-fix md-pagination-wrapper { 
    height: 2px; 
} 
+0

굉장! 잘못된 CSS 선택기를보고있었습니다. 공유해 주셔서 감사합니다! –

관련 문제