ionic2 - 如何自定义按钮大小

Yuyang He

这是我的分享按钮截图 在此处输入图片说明

这个屏幕尺寸为iphone6 4.7inch,但如果在iphone5 4inch上运行会拥挤变形,所以我想把按钮尺寸改得更小。

.html文件

<ion-row>
    <ion-note>分享:</ion-note>
      <button ion-fab color="wechat" (click)= "wechatshare(new)"><ion-icon name="minan-wechat"></ion-icon></button>
      <button ion-fab color="danger" (click)= "weiboshare(new)"><ion-icon name="minan-weibo"></ion-icon></button>
      <button ion-fab color="primary" (click)= "qqshare(new)"><ion-icon name="minan-qq"></ion-icon></button>
      <button ion-fab color="wechat" (click)= "whatsappshare(new)"><ion-icon name="logo-whatsapp"></ion-icon></button>
      <button ion-fab color="facebook" (click)= "FBshare(new)"><ion-icon name="logo-facebook"></ion-icon></button>
    </ion-row>

更新:

如果我删除ion-fab,它将是这样的

在此处输入图片说明

Yuyang He

终于解决了..感谢@Duannx

添加class="btn"button

.html文件

<button ion-fab color="facebook" class="btn" (click)= "FBshare(new)"><ion-icon name="logo-facebook"></ion-icon></button>

.scss文件

.btn {
  display:block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px ;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何创建Ionic2自定义构建过程?

来自分类Dev

如何在ionic2中添加新的自定义字体图标

来自分类Dev

如何使用ionic2框架创建或自定义Toast视图

来自分类Dev

防止注销后退按钮Ionic2

来自分类Dev

扩展http类用于自定义用法ionic2 / Angular2导致错误

来自分类Dev

Ionic2自定义组件中的参数未显示

来自分类Dev

找不到自定义的ionic2组件

来自分类Dev

IONIC2使用Firebase构建自定义音频流应用程序

来自分类Dev

如何在 Ionic2 中添加用户定义的图标?

来自分类Dev

ionic2 + angular2-单击禁用按钮

来自分类Dev

ionic2中navBar右侧的2个按钮

来自分类Dev

ionic2中navBar右侧的2个按钮

来自分类Dev

Ionic2圆形分段按钮

来自分类Dev

Ionic2右下角的浮动按钮

来自分类Dev

在 ionic2 通知按钮中添加操作

来自分类Dev

按数据调整按钮颜色(Ionic2)

来自分类Dev

Ionic2 选择的值未定义

来自分类Dev

如何使用qtip2自定义按钮

来自分类Dev

如何设置业力/茉莉与ionic2配合使用?

来自分类Dev

如何在ionic2中列出或删除服务,页面?

来自分类Dev

如何从Ionic2的离子输入中获取包裹的输入?

来自分类Dev

Ionic2如何在页面中使用JQuery插件

来自分类Dev

如何使用ionic2更改<离子卡>的颜色

来自分类Dev

如何安装最新的ionic2组件

来自分类Dev

Firebase更改后如何显示ionic2警报

来自分类Dev

Ionic2:如何在单个页面中设置CSS

来自分类Dev

Ionic2如何在页面中使用JQuery插件

来自分类Dev

如何清除ionic2中的所有列表

来自分类Dev

如何在ionic2中重定向