1

I am using the ionic beta and want to write a simple calculator app for learning. My first problem now is that I can't change the height of any buttons:

enter image description here

The buttons are placed in an <ion-grid> element:

<ion-content class="mainpage" scroll="false">
<ion-grid>
<ion-row class="result">
  <ion-col><p class="result">0</p></ion-col>
</ion-row>
<ion-row>
  <ion-col width-50><button large round full class="myButton">AC</button></ion-col>
  <ion-col><button large round full class="myButton">+/-</button></ion-col>
  <ion-col><button large round full class="myButton">/</button></ion-col>
</ion-row>
<ion-row>
  <ion-col><button large round block outline class="myButton">7</button></ion-col>
  <ion-col><button large round block outline class="myButton">8</button></ion-col>
  <ion-col><button large round block outline class="myButton">9</button></ion-col>
  <ion-col><button large round full class="myButton">*</button></ion-col>
</ion-row>
<ion-row>
  <ion-col><button large round block outline class="myButton">4</button></ion-col>
  <ion-col><button large round block outline class="myButton">5</button></ion-col>
  <ion-col><button large round block outline class="myButton">6</button></ion-col>
  <ion-col><button large round full class="myButton">+</button></ion-col>
</ion-row>
<ion-row>
  <ion-col><button large round block outline class="myButton">1</button></ion-col>
  <ion-col><button large round block outline class="myButton">2</button></ion-col>
  <ion-col><button large round block outline class="myButton">3</button></ion-col>
  <ion-col><button large round full class="myButton">-</button></ion-col>
</ion-row>
<ion-row>
  <ion-col width-75><button large round block outlin class="myButton"e>0</button></ion-col>
  <ion-col><button large round full class="myButton">=</button></ion-col>
</ion-row>

For the rows I set height: 100%; manually and it worked but the buttons don't stretch with the same attributes. I want them to fill the rows height.

Edit:

Here's the CSS:

ion-grid
{
    height: 100%;
}

ion-row
{
    height: 100%;
}

.myButton
{
    height: 100%;
}

.result
{
    color: white;
    text-align: center;
    font-size: 42px;
    background-color: #00AFFF;
    width: 100%;
    height: 100%;
}
4

5 回答 5

2

我遇到了同样的问题。我注意到 main.css 有 .button-ios 和 .button-md 可以调整按钮组件的高度。

在我的页面 scss 文件中，我这样做了：

.button-ios { #ios css 
    height: auto;
}

.button-md { #android css
    height: auto;
}

它奏效了。

于 2017-01-17T15:36:39.480 回答
0

为您的按钮添加一个类：

<button large round full block class="myButton">AC</button></ion-col>

并在 CSS 中添加类似的代码：

.myButton { height:100%; }

结果如下：

在此处输入图像描述

于 2016-06-07T11:32:56.363 回答
0

离子4.0

在 Ionic 4.0 中，您必须像这样设置 shadow DOM 变量：

ion-button { --height: auto; }
于 2019-01-18T10:59:49.997 回答
0

离子 3.x

从 HTML 模板中，您可以创建一个简单的按钮：

<button ion-button>Default</button>

在此处输入图像描述

如果您确切需要“计算器”按钮：

<button ion-button style="border-radius: 32px;">Default</button>

在此处输入图像描述

如果你想要大纲样式，你可以写：

<button ion-button outline style="border-radius: 32px;">Default</button>

在此处输入图像描述

您可以在官方文档之后找到更多信息。

于 2018-10-29T08:33:42.677 回答
0 
 <button class='button button-positive large_button'>
 Large button</button>

和CSS：

.large_button {
  line-height: 20vh !important;
    width: 50%;
  }

只需给它一个类，并定义行高。

于 2016-06-06T12:55:15.277 回答