최고의 이온 버튼 튜토리얼 2024년, 이 튜토리얼에서는 버튼의 다른 크기,어떤 배경 버튼 없음,어떤 배경 및 테두리 단추가 없습니다,아이콘 버튼,추가 단추의 머리 / 바닥,버튼 바,를 배울 수 있습니다.
버튼 모바일 앱, 앱 다른 스타일, 다른 버튼 필요한 스타일의 필수적인 부분입니다.
기본적으로 버튼 표시 스타일 :디스플레이 : 인라인 블록.
<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> Loadingko. </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>