color 属性不起作用
在用 2.x 开发时有的地方的颜色样式是通过添加 color="primary" 属性的形式设置的, 但是升级 3.x 之后这种方式除了一些自带的 color 属性的组件标签 (eg:) 可以生效, 其他的都失效了
解决办法: 添加 ion-text 属性
ionic2.x 这么用
- <p color="danger">我是危险的红色</p>
- <p color="secondary">我是有颜色的</p>
- <span color="primary">我也是有颜色的</span>
ionic3.x 这么用
- <p ion-text color="danger">我是危险的红色</p>
- <p ion-text color="secondary">我是有颜色的</p>
- <span ion-text color="primary">我也是有颜色的</span>
Grid 组件中标签上控制列所占宽度由原来 width-50 变为 col-6
在 ionic2.x 中, 假如一行有两列, 第一列宽度占比 30%, 第二列宽度占比 70%, 用官方给的 grid 组件代码是这样:
- <ion-grid text-center>
- <ion-row>
- <ion-col width-30>30%</ion-col>
- <ion-col width-70>70%</ion-col>
- </ion-row>
- <ion-grid>
width-30 就是列宽占行宽的 30%, 但是到了 ionic3.X 的版本中, width-X 这种用法被废除了, 取而代之的是 col-4, 在 ionic3 的版本中 grid 中默认把一行分为 12 个栅格, 也就是如果你在 ionic2 中这样写的话, 在 ionic3 中就要写成, 因为默认是 12 个栅格, 写为 col-6 意思是占 6 个栅格, 也就是 50% 的意思但是如果我们想 2-8 分的话, 还按默认 12 格来那就麻烦了, 因为 col - 后面只能是整数, 接小数的话就会这个属性就会失效这个时候需要我们把默认的 12 栅格改为 10 栅格, 在全局样式中把默认的 12 改为 10 就好了, 代码如下:
$grid-columns:10;
改完后, 那就好办了, 直接按 col-2 col-8 来就好了(ionic3.x), 代码如下:
- <ion-grid text-center>
- <ion-row>
- <ion-col col-2>20%</ion-col>
- <ion-col col-8>80%</ion-col>
- </ion-row>
- </ion-grid>
效果如下图:
来源: https://www.2cto.com/kf/201803/732546.html