이온 버튼

버튼 모바일 앱, 앱 다른 스타일, 다른 버튼 필요한 스타일의 필수적인 부분입니다.

기본적으로 버튼 표시 스타일 :디스플레이 : 인라인 블록.

<button class="button">
  Default
</button>

<button class="button button-light">
  button-light
</button>

<button class="button button-stable">
  button-stable
</button>

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

<button class="button button-energized">
  button-energized
</button>

<button class="button button-assertive">
  button-assertive
</button>

<button class="button button-royal">
  button-royal
</button>

<button class="button button-dark">
  button-dark
</button>

»시도

버튼 블록 스타일의 버튼이표시됩니다 : 디스플레이 : 블록은 완전히 여백 속성 패딩에 포함 된 부모 요소의 폭을 채 웁니다.

<button class="button button-block button-positive">
  Block Button
</button>

»시도

버튼 전체 유형을 사용하면 전체 폭을 표시하는 버튼을 만들 수 있으며, 패딩 패딩은 포함되지 않습니다.

<button class="button button-full button-positive">
  Full Width Block Button
</button>

»시도

버튼의 다른 크기

버튼 큰 큰 버튼으로, 버튼 작은 작은 버튼에.

<button class="button button-small button-assertive">
  Small Button
</button>
<button class="button button-large button-positive">
  Large Button
</button>

»시도

어떤 배경 버튼 없음

버튼 개요 투명 배경을 설정합니다.

<button class="button button-outline button-positive">
  Outlined Button
</button>

»시도

어떤 배경 및 테두리 단추가 없습니다

버튼 클리어 버튼은 투명한 배경없이 경계를 설정합니다.

<button class="button button-clear button-positive">
  Clear Button
</button>

»시도

아이콘 버튼

우리는 버튼에 아이콘을 추가 할 수 있습니다.

<button class="button">
  <i class="icon ion-loading-c"></i> Loading...
</button>

<button class="button icon-left ion-home">Home</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a"></button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

»시도

추가 단추의 머리 / 바닥

버튼을 추가 스타일을 추가 할 필요가 없습니다 머리글 / 바닥 글 설정되어 머리 / 바닥에 따라 단추 스타일, 단추를 추가 할 수 있습니다.

<div class="bar bar-header">
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</div>

»시도

버튼 분명 클래스는 배경 및 테두리 머리글 / 바닥 글 버튼을 설정할 수 없습니다.

<div class="bar bar-header">
  <button class="button button-icon icon ion-navicon"></button>
  <div class="h1 title">Header Buttons</div>
  <button class="button button-clear button-positive">Edit</button>
</div>

»시도

버튼 바

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

»시도