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 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card> <ion-card-header color="primary"> Card Header </ion-card-header> <ion-card-content> Cards are primarily a CSS component. To use a basic card, follow this structure: </ion-card-content> </ion-card> </ion-content> |
Lists In Cards
|
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 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card> <ion-card-header color="primary"> Explore Nearby </ion-card-header> <ion-list> <button ion-item> <ion-icon name="cart" item-start></ion-icon> Shopping </button> <button ion-item> <ion-icon name="medical" item-start></ion-icon> Hospital </button> <button ion-item> <ion-icon name="cafe" item-start></ion-icon> Cafe </button> <button ion-item> <ion-icon name="paw" item-start></ion-icon> Dog Park </button> <button ion-item> <ion-icon name="beer" item-start></ion-icon> Pub </button> <button ion-item> <ion-icon name="planet" item-start></ion-icon> Space </button> </ion-list> </ion-card> </ion-content> |
Images In Cards
ภาพที่ใช้ 
โดยเอาไปไว้ใน src\assets\imgs
|
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 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card> <ion-card-header color="primary"> Images In Cards </ion-card-header> <img src="../assets/imgs/apple.jpg" /> <ion-card-content> <ion-card-title> Nine Inch </ion-card-title> <p> The most popular industrial group ever. </p> </ion-card-content> </ion-card> </ion-content> |
|
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 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card> <img src="../assets/imgs/card_img.jpg" /> <ion-card-content> <ion-card-title> Nature </ion-card-title> <p> <ion-icon name="star"> Favorite </ion-icon> </p> <p> <ion-icon name="musical-notes"> Listen </ion-icon> </p> <p> <ion-icon name="share-alt"> Share </ion-icon> </p> </ion-card-content> </ion-card> </ion-content> |
Background Images
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 |
<ion-header> <ion-navbar> <ion-title>Background Images</ion-title> </ion-navbar> </ion-header> <ion-content class="card-background-page"> <ion-card> <img src="../assets/imgs/card1.jpg" /> <div class="card-title">São Paulo</div> <div class="card-subtitle">41 Listings</div> </ion-card> <ion-card> <img src="../assets/imgs/card2.jpg" /> <div class="card-title">Amsterdam</div> <div class="card-subtitle">64 Listings</div> </ion-card> <ion-card> <img src="../assets/imgs/card3.jpg" /> <div class="card-title">San Francisco</div> <div class="card-subtitle">72 Listings</div> </ion-card> <ion-card> <img src="../assets/imgs/card4.jpg" /> <div class="card-title">Madison</div> <div class="card-subtitle">28 Listings</div> </ion-card> </ion-content> |
src/pages/home/home.scss
|
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 |
page-home { .card-background-page { ion-card { position: relative; text-align: center; } .card-title { position: absolute; top: 36%; font-size: 2.0em; width: 100%; font-weight: bold; color: #fff; } .card-subtitle { font-size: 1.0em; position: absolute; top: 52%; width: 100%; color: #fff; } } } |
Social Cards
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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<ion-header> <ion-navbar> <ion-title>Social Card</ion-title> </ion-navbar> </ion-header> <ion-content class="cards-bg social-cards"> <ion-card> <ion-item> <ion-avatar item-start> <img src="../assets/imgs/avatar1.png"> </ion-avatar> <h2>Marty McFly</h2> <p>November 5, 1955</p> </ion-item> <img src="../assets/imgs/card1.jpg"> <ion-card-content> <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p> </ion-card-content> <ion-row> <ion-col> <button ion-button color="primary" clear small icon-start> <ion-icon name='thumbs-up'></ion-icon> 12 Likes </button> </ion-col> <ion-col> <button ion-button color="primary" clear small icon-start> <ion-icon name='text'></ion-icon> 4 Comments </button> </ion-col> <ion-col align-self-center text-center> <ion-note> 11h ago </ion-note> </ion-col> </ion-row> </ion-card> <ion-card> <ion-item> <ion-avatar item-start> <img src="../assets/imgs/avatar2.png"> </ion-avatar> <h2>Sarah Connor</h2> <p>May 12, 1984</p> </ion-item> <img src="../assets/imgs/card2.jpg"> <ion-card-content> <p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of human life, maybe we can too.</p> </ion-card-content> <ion-row> <ion-col> <button ion-button color="primary" clear small icon-start> <ion-icon name='thumbs-up'></ion-icon> 30 Likes </button> </ion-col> <ion-col> <button ion-button color="primary" clear small icon-start> <ion-icon name='text'></ion-icon> 64 Comments </button> </ion-col> <ion-col align-self-center text-center> <ion-note> 30yr ago </ion-note> </ion-col> </ion-row> </ion-card> <ion-card> <ion-item> <ion-avatar item-start> <img src="assets/img/ian-avatar.png"> </ion-avatar> <h2>Dr. Ian Malcolm</h2> <p>June 28, 1990</p> </ion-item> <img src="assets/img/advance-card-jp.jpg"> <ion-card-content> <p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p> </ion-card-content> <ion-row> <ion-col> <button ion-button color="primary" clear small icon-start> <ion-icon name='thumbs-up'></ion-icon> 46 Likes </button> </ion-col> <ion-col> <button ion-button color="primary" clear small icon-start> <ion-icon name='text'></ion-icon> 66 Comments </button> </ion-col> <ion-col align-self-center text-center> <ion-note> 2d ago </ion-note> </ion-col> </ion-row> </ion-card> </ion-content> <style> .social-cards ion-col { padding: 0; } </style> |
src/pages/home/home.scss
|
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 |
page-home { .card-background-page { ion-card { position: relative; text-align: center; } .card-title { position: absolute; top: 36%; font-size: 2.0em; width: 100%; font-weight: bold; color: #fff; } .card-subtitle { font-size: 1.0em; position: absolute; top: 52%; width: 100%; color: #fff; } } } |
Map Cards
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 98 99 100 101 |
<ion-header> <ion-navbar> <ion-title>Map Card</ion-title> </ion-navbar> </ion-header> <ion-content class="cards-bg"> <ion-card class="adv-map"> <div style="position: relative"> <img src="../assets/imgs/map1.jpg"> <ion-fab right top> <button ion-fab class="fab-map"> <ion-icon name='pin'></ion-icon> </button> </ion-fab> </div> <ion-item> <ion-icon color="subtle" large item-start name='football'></ion-icon> <h2>Museum of Football</h2> <p>11 N. Way St, Madison, WI 53703</p> </ion-item> <ion-item> <ion-icon color="subtle" large item-start name='wine'></ion-icon> <h2>Institute of Fine Cocktails</h2> <p>14 S. Hop Avenue, Madison, WI 53703</p> </ion-item> <ion-item actions> <span ion-text item-start color="secondary" class="item-bold">18 min</span> <span ion-text item-start color="subtle">(2.6 mi)</span> <button ion-button color="primary" clear item-end icon-start> <ion-icon name='navigate'></ion-icon> Start </button> </ion-item> </ion-card> <ion-card class="adv-map"> <div style="position: relative"> <img src="../assets/imgs/map2.jpg"> <ion-fab right top> <button ion-fab color="danger" class="fab-map"> <ion-icon name="pin"></ion-icon> </button> </ion-fab> </div> <ion-item> <ion-icon color="subtle" large item-start name='cloud'></ion-icon> <h2>Yoshi's Island</h2> <p>Iggy Koopa</p> </ion-item> <ion-item> <ion-icon color="subtle" large item-start name='leaf'></ion-icon> <h2>Forest of Illusion</h2> <p>Roy Koopa</p> </ion-item> <ion-item actions> <span ion-text item-start class="item-bold">3 hr</span> <span ion-text item-start color="subtle">(4.8 mi)</span> <button ion-button color="danger" clear item-end icon-start> <ion-icon name='navigate'></ion-icon> Start </button> </ion-item> </ion-card> <ion-card class="adv-map"> <div style="position: relative"> <img src="assets/img/advance-card-map-paris.png"> <ion-fab right top> <button ion-fab color="secondary"> <ion-icon name="pin"></ion-icon> </button> </ion-fab> </div> <ion-item> <ion-icon color="subtle" large item-start name='information-circle'></ion-icon> <h2>Museum of Information</h2> <p>44 Rue de Info, 75010 Paris, France</p> </ion-item> <ion-item> <ion-icon color="subtle" large item-start name='leaf'></ion-icon> <h2>General Pharmacy</h2> <p>1 Avenue Faux, 75010 Paris, France</p> </ion-item> <ion-item actions> <span ion-text item-start color="secondary" class="item-bold">26 min</span> <span ion-text item-start color="subtle">(8.1 mi)</span> <button ion-button color="secondary" clear item-end icon-start> <ion-icon name='navigate'></ion-icon> Start </button> </ion-item> </ion-card> </ion-content> |
src/pages/home/home.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
page-home { ion-card.adv-map p { font-size: 0.7em !important; } button[fab].fab-map { top: calc(100% - 35px); z-index: 50; } .item-bold { font-weight: bold; } ion-content.cards-bg { background-color: #f4f4f7; } } |