cordova - 如何在 ionic 2 中使图标和按钮变大

Question

如何在休闲代码中使button和icon尺寸变大:

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-left></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-left></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-left></ion-icon>
      Cafe
    </button>
  </ion-list>
</ion-card>

Answer 1

图标

ion-icon 是字体图标，因此可以使用以下 Sass/CSS 对其进行编辑，因为它们本质上是文本:

    ion-icon {
        font-size: 20px; //Preferred size here
    }

按钮

至于 button ionic 有一些内置的类来影响大小。例如:

   <button ion-button large>Large</button>

   <button ion-button>Default</button>

   <button ion-button small>Small</button>

您还可以将 src/theme/variables.scss 文件中的默认 Sass 变量 $button-round-padding 更新为您想要的大小.可以找到更多关于按钮的信息 here