Hi there I am trying to put a icon on one of my buttons that has a css class in my ionic project but when I do the icon does not show up heres my code down bellow. I have my css and my html/angular code down bellow, im trying to have 4 buttons nice and big next to each other and have a icon to make it look not so plain but when I do it does not show up
Thanks
Adam Weston
a{
text-decoration:none;
}
.buttontop{
display:inline-block;
padding:20px;
height:120px;
width:170px;
text-align:center;
background:white;
color:white;
font-size: 10px;
}
.active{
background:#188171;
}
<ion-header>
<ion-toolbar>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-title>Welcome to ATAM</ion-card-title>
</ion-card-header>
<ion-card-content>
ATAM is the Original Learning Center for Everything Technology, Art, Music and Recording. We blend creativity with genius, and foster entrepreneurship.
ATAM offers a huge variety of ways to learn through private instruction, group classes, advanced STEM/STEAM camps and through experimental game play.
</ion-card-content>
</ion-card>
<button ion-button icon-start>
<ion-icon name="star"></ion-icon>
Parties
</button>
<ion-button class="buttontop" expand="block">Sign up for Camp!
<ion-icon name="star"></ion-icon>
</ion-button>
<ion-button class="buttontop" expand="block">CreditCard Update</ion-button>
<ion-button class="buttontop" expand="block">Contact Us</ion-button>
<ion-card class="NewAtATAM">
<ion-img src="/assets/newatatam.jpg"></ion-img>
<ion-card-header>
<ion-card-title>New At ATAM</ion-card-title>
</ion-card-header>
</ion-card>
<ion-card class="SignupforMusiclessons">
<ion-img src="/assets/music.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Sign Up For Music Lessons</ion-card-title>
</ion-card-header>
<ion-card-content>
acoustic - electric - music production - recording
ATAM Music Department teaches over 30 instruments, acoustic and digital, as well as music production and professional recording. Sign up now!
Private lessons are Monday through Saturday
12pm to 8pm
</ion-card-content>
<ion-button expand="block" color="dark" href="contact-us" >sign up</ion-button>
</ion-card>
<ion-card class="Signupforsummercamp">
<ion-img src="/assets/summercamp.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Sign Up For Summer Camp</ion-card-title>
</ion-card-header>
<ion-card-content>
summer 2019 - tech- sports - art - music - field trips
Come experience ATAM Tech and Outdoor Summer Camp. The best of all worlds, combining tech, art, music, sports and field trips!
When: Monday-Friday, 8:30am to 3:30pm
June 10 - August 30
After Care Hours: 3:30 to 7:30.
</ion-card-content>
<ion-button expand="block" color="dark" href="camp">sign up</ion-button>
</ion-card>
<ion-card class="lessonsandclasses">
<ion-img src="/assets/lessonsandclasses.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Lessons and Classes</ion-card-title>
<ion-button color="dark" expand="full" fill="solid" href="contact-us">Learn more about Private Lessons</ion-button>
</ion-card-header>
</ion-card>
<ion-card class="tech">
<ion-img src="/assets/TECHSQUARE.jpg"></ion-img>
<ion-card-header>
</ion-card-header>
<ion-card-content>
Robotics, Programming, Game Design, App Building, Website Design, Engineering, Architecture
</ion-card-content>
<ion-button expand="block" color="dark" href="contact-us">Start Learnig</ion-button>
</ion-card>
<ion-card class="music">
<ion-img src="/assets/MUSICSQUARE.jpg"></ion-img>
<ion-card-header>
</ion-card-header>
<ion-card-content>
30 Acoustic instruments, Music Production, Professional Recording Studios </ion-card-content>
<ion-button expand="block" color="dark" href="contact-us">Start Learning</ion-button>
</ion-card>
<ion-card class="art">
<ion-img src="/assets/ARTSQUARE.jpg"></ion-img>
<ion-card-header>
</ion-card-header>
<ion-card-content>
Traditional Art in all mediums, Digital Illustration using Industry Standard Software and Techniques
</ion-card-content>
<ion-button expand="block" color="dark" href="contact-us" >Start Learning</ion-button>
</ion-card>
<ion-list lines="none">
<ion-list-header>
<ion-label>Resources</ion-label>
</ion-list-header>
<ion-item href="parties">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
<ion-label>Book A Party</ion-label>
</ion-item>
<ion-item href="camps">
<ion-icon slot="start" color="medium" name="build"></ion-icon>
<ion-label>Sign up For Summer Camp</ion-label>
</ion-item>
<ion-item href="regform">
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
<ion-label>Registration Form</ion-label>
</ion-item>
<ion-item href="creditcard">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Credit Card Update Form</ion-label>
</ion-item>
<ion-item href="contact-us">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Contact US</ion-label>
</ion-item>
</ion-list>
</ion-content>
If you want to align these 4 button in single line you should use ion-row, have your buttons placed in their individual ion-col.
And another thing is, correct syntax is <button ion-button></button> not <ion-button></ion-button>
<ion-row>
<ion-col>
<button ion-button icon-start>
<ion-icon name="star"></ion-icon>
Parties
</button>
</ion-col>
<ion-col>
<button ion-button icon-start class="buttontop" expand="block">
<ion-icon name="star"></ion-icon>
Sign up for Camp!
</button>
</ion-col>
<!-- add rest of the buttons in their separate ion-col -->
</ion-row>
Related
i want to position a div with the id "first" to the right of another div with the id "second" how to do that ?
<ion-col>
<div id="second">
<ion-img src="./assets/images/from_to.svg" style="height:30%;width:10%;"></ion-img>
</div>
<div id="first">
<ion-label>Domicile</ion-label>
<ion-label >120 Square de la Couronne,Paris</ion-label>
</div>
</ion-col>
First of all, I suggest you lessen the use of the basic html, for example, try using instead of .
Second, you practically never use id with html tags.
Now to answer your question, a little bit more code would help but here's one solution:
HTML:
<ion-col>
<ion-item class="second">
<ion-image class="img" src="/assets/images/from_to.svg" />
</ion-item>
<ion-item class="first">
<ion-label>Domicile</ion-label>
<ion-label>120 Square de la Couronne,Paris</ion-label>
</ion-item>
</ion-col>
CSS:
.first{
float: right;
}
.second{
float:left;
}
I assume that you already know that "HTML" goes to your x.page.html and the "CSS" goes to your x.page.scss of the same folder.
Looks like you want to create a list containing an image with an description on the right side on every element. If that's the case try ion-list which offers interacting with the list elements much easier, since you can use the included swiping, dragging within the list, and deleting items.
Example:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
</ion-list>
I placed many cols in 1 row.
When the screen size is big, ion-cols are placed in a row in a clean manner, but in mobile view of chrome, when the screen size is small, most of ion-cols are placed in a row and a few remaining are in the second row.
My code looks like this.
<ion-row>
<ion-col size="3" size-sm="2">
<ion-icon name="add-circle"></ion-icon>
<ion-icon name="remove-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="cloud-download"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="save"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="settings"></ion-icon>
</ion-col>
<ion-col>
<ion-icon [name]="icon_show_hide === 'Hide' ? 'eye-off' : 'eye'">
</ion-icon>
</ion-col>
<ion-col>
<ion-icon name="map"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="triangle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="arrow-undo-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="arrow-redo-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="trash"></ion-icon>
</ion-col>
</ion-row>
how can I make the number of the cols in each row same like 5 cols in the first row and another 5 in the second row?
I need this in all mobile devices.
can anyone give me the solution to this problem?
a row can have maximum 12 unit. you can divided 12 between 5 col. and for this pattern you fill first row and another cols is in second row
<ion-row>
<!-- fill first row-->
<ion-col size="5"></ion-col>
<ion-col size="5"></ion-col>
<ion-col size="2"></ion-col>
</ion-row>
in this case i fill a row with 3 col. and also you can fill row with offset
<ion-row>
<!-- fill first row-->
<ion-col size="5" offset="2"></ion-col>
<ion-col size="5"></ion-col>
</ion-row>
in this case i fill offset 2 unit from the left.
and for customize for screen size you can use permistion after size and offset.
<ion-row>
<!-- fill first row-->
<ion-col size-md="5" offset-md="2"></ion-col>
<ion-col size="5"></ion-col>
</ion-row>
i customize my col when screen size is md or lover . but you can learn about all about this in ionic offcial
I've an ion-card that get its contents from a web server, all is working fine except linking ion-card click event to external url, below is my code
<ion-content no-padding >
<ion-item no-padding *ngFor="let item of items" >
<ion-card (click)="goToDetails('{{item.link}}')">
<img class="images" src="http://mydomain/{{item.captionImage}}">
<ion-item text-wrap>
<div class="headings">{{item.title}}</div>
</ion-item>
<ion-card-content text-wrap>
<p>{{item.message}}"</p>
</ion-card-content>
<ion-row>
<ion-col col-9>
<ion-row>
<ion-col>
<img class="owner-logo" src="http://mydomain/{{item.sourceLogo}}">
</ion-col>
<ion-col>
<div class="owner-name">{{item.source}}</div>
</ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
</ion-row>
</ion-col>
<ion-col col-3 text-right>
<button ion-button clear small color="danger" icon-start (click)="regularShare(index)">
<ion-icon name='share'></ion-icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>
</ion-item>
</ion-content>
my .ts file is
public goToDetails(url : string){
let target = "_self";
this.theInAppBrowser.create(url,target,this.options);
}
I got this error message
Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 13.
You need to write ion-card like this
<ion-card (click)="goToDetails(item.link)">
If you are in in-build directive like click, ngIf you don't need to use interpolation
Im populating dynamic data using ionic 2 & angular here im getting and displaying the data but im getting table in non responsive format and below is my code
<ion-grid>
<ion-row style="padding-top:5px;paddind:bottom:5px;background:#488aff">
<ion-col>
A
</ion-col>
<ion-col>
B
</ion-col>
</ion-row>
<ion-row *ngFor="let value of resultData" style="background:#eff0f1">
<ion-col>
{{value.A}}
</ion-col>
<ion-col>
{{value.b}}
</ion-col>
</ion-row>
I need to apply the sliding effect with these buttons. I have the following html:
<ion-row class="row-two-button">
<ion-col class="button-group">
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationA, light: travelDestinationB}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Centro
</button>
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationB, light: travelDestinationA}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Bairro
</button>
</ion-col>
</ion-row>
I need to make the slide effect in scss. I'm using ionic 3. If it does not work with my html code how can I do it with another type, a div or something like
When sliding it is also necessary to perform a function in angular 2 or angular 4