- Basic Usage
- Outline Style
- Clear Style
- Round Buttons
- Block Buttons
- Full Buttons
- Button Sizes
- Icon Buttons
1. Basic Usage
2. Outline Style
3. Clear Style
4. Round Buttons
5. Block Buttons
6. Full Buttons
7. Button Sizes
8. Icon Buttons
1. Basic Usage
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button>Default</button> <button ion-button color="primary">Primary</button> <button ion-button color="secondary">Secondary</button> <button ion-button color="danger">Danger</button> <button ion-button color="light">Light</button> <button ion-button color="dark">Dark</button> </ion-content> |
บรรทัดที่ 10: ไม่มีการกำหนดสี (color) ปุ่มจะใช้สี primary
บรรทัดที่ 10: กำหนดสี (color) เป็น “primary”
src/theme/variables.scss
|
1 2 3 4 5 6 7 |
$colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222 ); |
ค่าสีกำหนดไว้ที่ไฟล์ variables.scss
2. Outline Style
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button outline>Default</button> <button ion-button color="primary" outline>Primary</button> <button ion-button color="secondary" outline>Secondary</button> <button ion-button color="danger" outline>Danger</button> <button ion-button color="light" outline>Light</button> <button ion-button color="dark" outline>Dark</button> </ion-content> |
3. Clear Style
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button clear>Default</button> <button ion-button color="primary" clear>Primary</button> <button ion-button color="secondary" clear>Secondary</button> <button ion-button color="danger" clear>Danger</button> <button ion-button color="light" clear>Light</button> <button ion-button color="dark" clear>Dark</button> </ion-content> |
จริงๆไม่มีขอบ แต่ที่ปุ่ม Defaultเหมือนมีพื้นปุ่มบางๆ เป็นเพราะเราเอาเมาส์ hover ผ่าน
4. Round Buttons
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button round>Default</button> <button ion-button color="primary" round>Primary</button> <button ion-button color="secondary" round>Secondary</button> <button ion-button color="danger" round>Danger</button> <button ion-button color="light" round>Light</button> <button ion-button color="dark" round>Dark</button> </ion-content> |
5. Block Buttons
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button block>Default</button> <button ion-button color="primary" block>Primary</button> <button ion-button color="secondary" block>Secondary</button> <button ion-button color="danger" block>Danger</button> <button ion-button color="light" block>Light</button> <button ion-button color="dark" block>Dark</button> </ion-content> |
6. Full Buttons
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full>Default</button> <button ion-button color="primary" full>Primary</button> <button ion-button color="secondary" full>Secondary</button> <button ion-button color="danger" full>Danger</button> <button ion-button color="light" full>Light</button> <button ion-button color="dark" full>Dark</button> </ion-content> |
7. Button Sizes
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button small>Small</button> <button ion-button>Default</button> <button ion-button large>Large</button> <button ion-button small block>Small</button> <button ion-button block>Default</button> <button ion-button large block>Large</button> </ion-content> |
8. Icon Buttons
src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <p> <!-- Float the icon left --> <button ion-button icon-start> <ion-icon name="home"></ion-icon> Left Icon </button> <!-- Float the icon right --> <button ion-button icon-end> Right Icon <ion-icon name="home"></ion-icon> </button> <!-- Only icon (no text) --> <button ion-button icon-only> <ion-icon name="home"></ion-icon> </button> </p> <p> <button ion-button color="light" icon-start> <ion-icon name='arrow-back'></ion-icon> Back </button> <button ion-button color="light" icon-only> <ion-icon name='arrow-down'></ion-icon> </button> <button ion-button color="light" icon-only> <ion-icon name='arrow-up'></ion-icon> </button> <button ion-button color="light" icon-end> Next <ion-icon name='arrow-forward'></ion-icon> </button> </p> <p> <button ion-button icon-start> <ion-icon name='home'></ion-icon> Home </button> <button ion-button outline icon-start> <ion-icon name='briefcase' is-active="false"></ion-icon> Work </button> <button ion-button clear icon-start> <ion-icon name='beer' is-active="false"></ion-icon> Pub </button> </p> <p> <button ion-button color="secondary" icon-start> <ion-icon name='people'></ion-icon> Friends </button> <button ion-button color="secondary" outline icon-start> <ion-icon name='paw' is-active="false"></ion-icon> Best Friend </button> </p> <p> <button ion-button color="danger" icon-start> <ion-icon name='close'></ion-icon> Remove </button> <button ion-button color="danger" outline icon-only> <ion-icon name='remove-circle' is-active="false"></ion-icon> </button> <button ion-button color="danger" clear icon-only> <ion-icon name='trash' is-active="false"></ion-icon> </button> </p> <p> <button ion-button color="dark" round icon-start> <ion-icon name='construct' is-active="false"></ion-icon> Tools </button> <button ion-button color="dark" clear icon-only> <ion-icon name='hammer' is-active="false"></ion-icon> </button> </p> </ion-content> |
9. Buttons In Components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<ion-header> <ion-navbar> <ion-title>Buttons In Components</ion-title> <ion-buttons start> <button ion-button icon-only> <ion-icon name='contact'></ion-icon> </button> </ion-buttons> <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> <img src="assets/imgs/logo.png" /> </ion-card-content> <ion-item> <button ion-button clear item-start>Like</button> <button ion-button clear item-end>Comment</button> </ion-item> </ion-card> <ion-list> <ion-item> <button ion-button item-start outline>Outline</button> <div item-end>Inner Button</div> </ion-item> <ion-item> Inner Button <button ion-button item-end outline>Outline</button> </ion-item> <ion-item> Left Icon Button <button ion-button item-end outline icon-start> <ion-icon name='star'></ion-icon> Left Icon </button> </ion-item> <ion-item> Right Icon Button <button ion-button item-end outline icon-end> Right Icon <ion-icon name='star'></ion-icon> </button> </ion-item> </ion-list> </ion-content> |
Link