Cách chèn các tab bên trong nội dung ion trong Ionic

Luôn sử dụng Ionic khung tuyệt vời để phát triển ứng dụng di động của tôi. mọi thứ dường như hoạt động tốt.Cách chèn các tab bên trong nội dung ion trong Ionic

Tôi muốn thêm điều gì đó cụ thể vào ứng dụng của mình. Tôi muốn có ứng dụng bên trong nội dung ion.

Tôi đang sử dụng tab thanh nút. Tôi không chắc đây có phải là giải pháp đúng hay không.

Tôi cũng muốn cho bạn biết rằng tôi đang sử dụng công cụ đã có tab trong ứng dụng của mình, do đó, trong app.js của tôi, tôi có một số mã để nagigating tab. vì vậy tôi không biết làm cách nào tôi có thể thêm một trang khác cho một trang khác.

mã của tôi:

CODEPEN

đây là những gì tôi muốn:

Screenshot of what I want

đây một số mã của tôi:

<body> 
<div> 
<ion-header-bar class="bar-stable"> 
    <button class="button button-clear button-positive" href="index.html">Retour</button> 

     <h1 class="title">Détails</h1> 

    </ion-header-bar> 
<ion-content> 

    <div class="item item-divider" style="height:45px"> 
     <div style="display:inline-block; left:10px; position:absolute;"> 
    <h5>Competiton</h5> 
    <h5>14th journey</h5> 
      </div> 
     <div style="display:inline-block; right:10px; position:absolute;"> 
    <h5>25 MAI 2015</h5> 
      <h5>18:00</h5> 
      </div> 
    </div> 
    <div class="item item-text-wrap" style="height:100px"> 
    <img src="http://upload.wikimedia.org/wikipedia/en/6/6a/Zte_Football_Club_Logo_90.png" style="width:55px; height:55px; position:absolute; left:10px; top:12px"> 
     <img src="http://upload.wikimedia.org/wikipedia/en/6/6a/Zte_Football_Club_Logo_90.png" style="width:55px; height:55px; position:absolute; right:10px; top:12px" > 
     <h4 style="position:absolute; left:10px; top:70px">ASROME</h4> <h4 style="position:absolute; right:10px; top:70px">LAZIO</h4> 
     <h4 style="position:absolute; left:150px; top:35px">3</h4> <h4 style="position:absolute; right:150px; top:35px">2</h4> 
    </div> 

<div class="button-bar"> 
<a class="button" tab-state ui-sref="home">Résumé</a> 
    <a class="button" tab-state ui-sref="contact">Composition</a> 

</div> 

    </div> 
    </body>

Nguồn

2015-05-26 Yasser B.

hey u đã nhận được bất kỳ giải pháp? .. – Lakshay

cùng một câu hỏi với @Lakshay, đã u nhận được bất kỳ giải pháp? –

tôi đã cùng một vấn đề, Tôi đã sửa nó như thế này.

<ion-view view-title="Tabs"> 
    <ion-pane> 
     <ion-tabs class="tabs-top"> 

      <!-- Tab 1 --> 
      <ion-tab title="Tab 1" href="#/tab/tab1"> 
       <ion-nav-view name="tab-tab1"> 
        <ion-content> 
         Tab 1 content 
        </ion-content> 

       </ion-nav-view> 
      </ion-tab> 


      <!-- Tab 2 --> 
      <ion-tab title="Tab 2" href="#/tab/tab2"> 
       <ion-nav-view name="tab-tab2"> 
        <ion-content> 
         Tab 2 content 
        </ion-content> 
       </ion-nav-view> 
      </ion-tab> 
     </ion-tabs> 

    </ion-pane> 
</ion-view>

Nguồn

2015-07-19 22:15:51

Giải pháp tuyệt vời, hoạt động như một sự quyến rũ! Cảm ơn bạn! –

Bạn đã lưu tôi từ rất nhiều ' ';) – Cody

đơn giản. dọn dẹp. đã làm việc. –

Như nói Ionic tài liệu

Lưu ý: không đặt ion tab bên trong của một phần tử ion nội dung; nó có được biết là gây ra một lỗi CSS nhất định.

Nguồn

2015-10-19 09:17:06

đây không phải là câu trả lời! –

@BraianMellor Tôi nghĩ là vậy. Những gì OP muốn không phù hợp với mô hình của Ionic và tài liệu nói rõ ràng. –

"chúng ta nên tìm một cách khác" là một bình luận. Một câu trả lời là một câu trả lời cho vấn đề, điều này chỉ đặt một vấn đề vào vấn đề, một câu trả lời phải là một cái gì đó như thế này https://codepen.io/leoz/pen/gpMMmW?editors=1010 –

Bạn nên sử dụng thanh tab thay vì điều khiển được phân đoạn khi bạn muốn cho phép người dùng di chuyển qua lại giữa các trang riêng biệt trong ứng dụng của bạn.

Đối với giải pháp của bạn, bạn phải sử dụng phân đoạn.

http://ionicframework.com/docs/api/components/segment/Segment/

Nguồn

2017-06-22 23:36:26

Tôi xóa câu trả lời của tôi khi tôi nhìn thấy bạn ... Đó là cách :) –

Cách chèn các tab bên trong nội dung ion trong Ionic

Trả lời

Các vấn đề liên quan