는 어떻게</p> <p>나는 이런 식으로 뭔가 달성하고자하는 내 페이지의 중간에 탭을 필요 내용을

Question

를 설정하는 탭 막대로 onsenui 세그먼트를 사용 : http://i.stack.imgur.com/GrNpS.png (taken from 33566805을 - 비슷한 질문을 가진 탭 표시 줄에 대해 Android UI)

ons-tabbar은 앱의 top 또는 bottom이며, 클릭하면 전체가 page으로 변경됩니다. 그래서 나는 페이지 중앙의 탭 모음으로 use an ons-segment을 사용할 것입니다. 선택된 버튼과 다른 버튼이 라디오 버튼처럼 작동합니다. 그러나 외모를 설정하는 방법과 내용을 설정하는 방법은 무엇입니까?

샘플 코드 :

<!-- top of page, not part of question --> 
<ons-page id="mypage"> 
<div ... 

<!-- HERE GOES --> 
<div id="maintabbar" class="segment tbar-center" style="float:none important!; width: 98%; margin: 0 auto;"> 
    <div class="segment__item"> 
    <input type="radio" class="segment__input" name="segment-a" checked> 
    <button class="segment__button">One</button> 
    </div> 
    <div class="segment__item"> 
    <input type="radio" class="segment__input" name="segment-a"> 
    <button class="segment__button">Two</button> 
    </div> 
    <div class="segment__item"> 
    <input type="radio" class="segment__input" name="segment-a"> 
    <button class="segment__button">Three</button> 
    </div> 
</div> 
<ons-card id="crd1">... 

내 CSS :

.tbar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.stretcher { 
    flex: 1; 
} 

그리고 JS

ons.bootstrap(); 

나는 putting this in a codepen 시도했지만 클래스 = "세그먼트는"제대로 표시되지 않습니다. Monaca 클라우드에서 OK를 표시합니다. 이 이미지를 참조하십시오

이 질문은 실제로 여러 부분이 있습니다

사용해야합니까 어떤 UI 요소

• , 다른 ons-segment 또는 뭔가?
• 둥근 모양의 단추 모양을 사각형 탭 모양으로 바꾸려면 어떻게 설정합니까?
• 변경할 콘텐츠를 어떻게 설정합니까? ons-template 또는 card 또는 다른 것을 사용합니까? 어떤 콘텐츠를 볼 수있게 설정하는 자체 함수를 작성해야합니까?

나는 VUE로 답을 선호하지만, 다른 프레임 워크 또는 일반 JS와 CSS도 할 것입니다. 이런 종류의 사용을 위해 준비가 된 것은 무엇입니까?

중간의 레이아웃

Answer 1

확인, 대답은 : 예,이 세그먼트를위한 것입니다. 그것은 자동으로 탭 표시 줄처럼 동작

(그것은 "라디오 버튼"을 사용하기 때문에) 나는 내가 각도 VUE 또는 다른 클라이언트 측 프레임 워크와 컨트롤러를 사용하는 것으로 확인

updated the codepen. 다음과 같이

jQuery로 JS 직접 그 일을 보인다 : 나는 CDN의 잘못된 버전을했기 때문에 요소가 렌더링되지 않은

function setTab(i){ 
     var tabscount = 3; // You can do this programmatically 
     for (j=1; j<=tabscount; j++){ 
      if (i == j){ 
      if (!($("#card"+j).is(":visible"))) $("#card"+j).show(); 
      } else if ($("#card"+j).is(":visible")) $("#card"+j).hide(); 
} 

이유가 있었다. OK는 끝나는 모두 OK 다. 내 업데이트 된 펜을 참조하십시오. 여백 - 왼쪽 여백 오른쪽 당신이 원하는 경계에 보관와 다음 "segment"사업부와 사업부의 모든 cards 퍼팅

은 (tabs-margins 나는 그것을 ID를했다).당신은 다음 CSS를 세그먼트가 bar-center의 클래스를 div에 제공 및 사용

:

.bar-centered { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.bar-margins { 
    width: 98%; 
    margin-left: 10px; 
} 

당신은 "세그먼트"DIV 스타일을 더욱 수와 그 버튼이 사각형 버튼을 사용하여, 위쪽 테두리를 표시하지