본문 바로가기

Web/Ionic

[Ionic] Components Buttons

buttons.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Buttons</ion-title>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-content>
    </ion-card-content>
    <ion-item>
      <button ion-button clear item-left>Like</button>
      <button ion-button clear item-right>Comment</button>
    </ion-item>
  </ion-card>
  <ion-list>
    <ion-item>
      Inner Button
      <button ion-button outline item-right>Outline</button>
    </ion-item>
    <ion-item>
      Left Icon Button
      <button ion-button outline item-right icon-left>
        Left Icon
        <ion-icon name="star"></ion-icon>
      </button>
    </ion-item>
  </ion-list>
</ion-content>

buttons.ts

import { Component } from '@angular/core';

@Component({
    templateUrl: 'buttons.html'
})
export class ButtonsPage {
    constructor() {

    }
}