情况:
在我的 Ionic 2 应用程序中,我需要将菜单按钮放在两行上:图标和文本。
问题在于 ion-button 指令以某种方式强制按钮位于一行。
我需要 ion-button 指令来确保按钮始终具有正确的格式和响应位置。 我只需要该按钮位于两行即可。
这是我尝试的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;
}
问题:
如何在两条线上制作离子按钮?
谢谢!
你的路线是正确的。需要稍作修改才能工作。
这是我的标记:
<button ion-button block color="menu-o">
<div>
<ion-icon name="flash"></ion-icon>
<label>Flash</label>
</div>
</button>
<div>
里面的<button>
就是诀窍。此标记唯一需要的是将 <label>
元素设置为 display: block
。
因为
<p>
已经是一个块级元素。它可能会按原样工作。
这就能解决问题:
.button-inner {
flex-flow: column;
}
这会将元素顺序从水平更改为垂直。
如果你想让按钮更漂亮一点,你就必须改变按钮的高度。 (例如带有图标边距)
.button-icon-top {
height: 5em;
.button-inner {
flex-flow: column;
.icon {
margin-bottom: 10px;
font-size: 2em;
}
}
}
只需将类名称添加到您的按钮即可。
<button ion-button full large class="button-icon-top">
<ion-icon name="logo-twitter"></ion-icon>
<span>Click me</span>
</button>
这不能正常工作。 似乎不可能覆盖按钮内部类。 在这里使用 ionic v7