css - framework - ionic3 documentation



이온 2-아이콘과 텍스트가있는 두 줄의 이온 버튼 만드는 법? (1)

상황 :

내 이오니아 2 응용 프로그램에서 아이콘과 텍스트의 두 줄에 메뉴 버튼이 있어야합니다.

문제는 어떻게 든 이온 버튼 지시문이 버튼을 한 줄에 놓아야한다는 것입니다.

이온 버튼 지시문을 사용하여 버튼의 형식과 위치가 항상 적절하게 지정되었는지 확인해야합니다. 그 버튼이 두 줄에 있어야합니다.

내 시도의 html과 css :

HTML :

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle="left" start>
        <ion-icon name="menu"></ion-icon> <br />
        <p class="menuSubTitle">MENU</p>
    </button>
    <ion-title>
        HomePage
    </ion-title>
        <button ion-button menuToggle="right" end>
        <ion-icon name="person"></ion-icon> <br />
        <p lass="menuSubTitle">LOGIN</p>
    </button>
    </ion-navbar>
</ion-header>

CSS :

.menuSubTitle {

        font-size: 0.6em;
        float:left;
        display: block;
        clear: both;
    }

질문 :

두 줄로 이온 버튼을 만들려면 어떻게해야합니까?

감사!

https://src-bin.com


Answer #1

당신은 쓰기 라인을 따라 있습니다. 약간의 수정이 필요합니다.

내 마크 업은 다음과 같습니다.

<button ion-button block color="menu-o">
    <div>
        <ion-icon name="flash"></ion-icon>
        <label>Flash</label>
    </div>
</button>

버튼 내부의 div는 속임수입니다. 이 마크 업에 필요한 유일한 것은 label element to display block 하도록 설정하는 것 label element to display block

<p> 는 이미 블록 수준 요소이므로 있는 그대로 작동 할 수도 있습니다.





ionic2