2017-04-05 56 views
5

離子按鈕有兩個問題。 1.離子文檔僅顯示離子按鈕元素的用法,除了可以從示例推斷出的內容外,沒有真正的解釋。 2.什麼引起我的關注,這是我的密切標籤出現在錯誤的地方。當我在文檔上看到這個時,我想知道這是否是一個錯誤,但我也在堆棧中的代碼示例中看到了這一點。像這樣的:離子按鈕的開始和結束語法沒有意義

<ion-header> 
    <ion-navbar primary> 
    <ion-buttons start>  **// here it starts.** 
     <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
    </ion-buttons> **//Why does ion-buttons close here?** 

    <ion-title> 
     My Page 
    </ion-title> 

    <ion-buttons end> **// END here?** 
     <button ion-button icon-only> 
     <ion-icon name="search"></ion-icon> 
     </button> 
    </ion-buttons> **// then close AGAIN here when there is no companion open tag?** 
    </ion-navbar> 
</ion-header> 
+0

你的問題是什麼? – 2017-04-05 19:41:22

+2

如果你看看代碼片段,你會看到我在哪裏注意到我的問題 – Spilot

+0

「開始」和「結束」並不像你想的那樣。把它看作是左標記和右標記。每個''''像往常一樣用''關閉' –

回答

4
<ion-buttons start>  **// here it starts.** 

其實這裏start平均離子鍵沒有開始。這裏start的意思是根據它們的documentation。只是幫助做按鈕對齊。

根據平臺在起始處對齊元素。 iOS的推移離開, Android是第一項右側

請參考離子鍵性質部分。

</ion-buttons> **//Why does ion-buttons close here?** 

這裏實際關閉以前打開離子鍵<ion-buttons start> 因爲我們做的通常是這樣<ion-buttons> </ion-buttons>

<ion-buttons end> **// END here?** 

這裏end平均離子鍵沒有結束。根據他們的documentation。只是幫助做按鈕對齊。

根據平臺對齊元素。 iOS的推移權, Android是右側

請參考離子鍵性質節的最後一個項目。

</ion-buttons> **// then close AGAIN here when there is no companion open tag?** 

我們再次將關閉以前打開的<ion-buttons end>標籤。正如我們通常這樣做<ion-buttons> </ion-buttons>伴侶打開標籤爲此爲<ion-buttons end>標籤。不要混淆標籤內的end。那end確實有助於做它的按鈕對齊。不要以爲:)。

希望這對你有幫助。乾杯!

4

沒有issue.Those是CSS工具,其中startend遵循UI模式爲platform.Please見下文關於它的更多細節。

enter image description here

你可以看到完整的列表在這裏:由@sebaferreras

CSS-Utilities (ion-buttons property)

簡要說明就像你可以在this post看到,mhartington(從離子組)解釋:

開始和結束遵循UI模式爲平臺

所以<ion-buttons start>將是對左側的iOS和上針對Android右側的第一個 按鈕。

<ion-buttons end>將在ios上的最後一個按鈕和 右側爲Android。

左/右是提供作爲一種方式來超越。

因此,如果您想要將按鈕置於android和ios的左側,請使用left css實用程序。

通過Ionic Team Member Mike Hartington

不,

開始和結束遵循UI模式爲平臺

那麼將是對左側的IOS,並在第一 按鈕適用於Android。

會在右側爲ios和最後一個按鈕在 右側爲android。

左/右是提供作爲一種方式來超越。

+2

我已經給你的答案添加了一個簡短的解釋,希望你不要介意:) – sebaferreras

+2

這是完全OK.Thanks :) @sebaferreras – Sampath

+0

我有上面分享了一個官方文檔。你能告訴我們你現在有什麼問題嗎? http://ionicframework.com/docs/theming/css-utilities/請參閱(離子按鈕屬性)。 – Sampath

1

如果有人試圖在標題的任一端(左右兩側)放置按鈕,則以下語法爲Ionic 3.19.0中的當前語法。使用leftright而不是開始和結束。

<ion-navbar> 
    <ion-title>Title</ion-title> 
    <ion-buttons left> 
     <button left ion-button icon-only (click)="addItem()"> 
      <ion-icon name="add"></ion-icon> 
     </button> 
    </ion-buttons> 
    <ion-buttons right> 
     <button right ion-button icon-only (click)="presentPopover($event)"> 
      <ion-icon 
       [name]="poppedOver ? 'close' : 'menu'" 
      ></ion-icon> 
     </button> 
    </ion-buttons> 
</ion-navbar>