I am trying to do an intro for an app with < ion-slides page>, my problem comes to set an image as background, I am trying to do this on my HTML:
<ion-header>
<ion-navbar>
<ion-title>Intro</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-slides pager>
<ion-slide style="background-image: url(/../../www/img/fondo.png)">
<h2>Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: mediumpurple">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: mediumpurple">
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
As it can be seen, the first slide should show the image, but what I get is this:
Thanks for helping!
Your background image path is incorrect.
The image should be saved in /src/assets/img/fondo.png.
This is copied to /www/assets/img/fondo.png during the build process.
Your html code will have :
<ion-slide style="background-image: url(../assets/img/fondo.png)">
For those using Ionic 2+ I think this syntax is what you're looking for:
<ion-slide *ngFor="let imgFile of imgList" [style.backgroundImage]="'url(../assets/image/' + imgFile)">
Related
I am developing a project for e-commerce, and in product-detail page,i have one slider with product images. in that user can zoom that image.
my html code
<ion-slides pager="true" style="height:45%" zoom> <ion-slide *ngFor="let slide of selProd.productImages"> <img src="{{slide.image}}"> </ion-slide> </ion-slides>
but when i try to zoom image by pinch or double tap. it gives me error:
swiper-zoom.js:364 Uncaught TypeError: Cannot read property 'getAttribute' of null
at toggleZoom (swiper-zoom.js:364)
Thank you.
UPDATE
Adding class swiper-zoom-container with div tag in between img tag and ion-slide tag solved the issue.
Ex.:
<ion-slides pager="true" style="height:45%" zoom>
<ion-slide *ngFor="let slide of selProd.productImages">
<div class="swiper-zoom-container">
<img src="{{slide.image}}">
</div>
</ion-slide>
I am very new to Ionic 2 and I am unable to change my side menu background color and also the menu-header color of my app. Any help appreciated! Below is the code snippet and the desired result(image). I have numbered the requirements for convenience. Also, it would be very helpful if someone can help with the implementation of drop down option(requirement no. 3). Basically it would contain some sub-list items. Thanks in advance!
<ion-menu [content]="content">
<ion-header no-border>
<ion-toolbar color = "white">
<ion-title class="titletext" style="display:inline-block" >
<div style = "width : 100%; height : 100%; background-color : white">
<div style = "float:left;width:75%">
<h3>MY APP </h3>
</div>
<div style = "float:right;width:25%">
<img src = "assets/icon/reports.PNG" />
</div>
</div>
</ion-title>
<!--<img src="assets/icon/Wemart_Icon.png" alt="logo" height="40px" width = "40px" > -->
</ion-toolbar>
</ion-header>
<ion-content>
<div style = "color : #3DBCC0; width:100%; height : 100%">
<ion-list>
<!--<button menuClose ion-item *ngFor="let p of myPages" (click)="openPage(p)">
<span text-color="my-custom-color2">{{p.title}}</span>
</button>-->
<button ion-item>
<ion-icon name="home" item-left></ion-icon> HOME
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> PORTFOLIO ANALYTICS
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> EXPENSES
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> UTILITY ANALYTICS
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> TERMS OF USE
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> SIGN OUT
</button>
</ion-list>
</div>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I am adding variables.scss code below:
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";
#import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
$toolbar-background: white;
$toolbar-wp-title-text-align : left;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
color1 : #8FAADC,
color2 : #DAE3F3,
color3: #3DBCC0
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
#import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/
#import "ionic.ionicons";
// Fonts
// --------------------------------------------------
#import "roboto";
#import "noto-sans";
in order to give background color to swidemenu you have to open app.css and copy paste the below code. basically ion-menu has a content block just like pages. so you have to change the background color of that page( sidemenu )
ion-menu{
ion-content{
background-color:red !important;
}
}
<ion-toolbar yourcolorname>
If you declare a color in the scss like you did with color1, color2 etc. And then you can use your colors as in the example above.
You can create div as header following <ion-list> within <ion-content>
. then apply style to the header and accordingly to the <ion-list>as well.
<ion-menu [content]="content">
<ion-content>
<!--Menu Header-->
<div>
........
</div>
<!--Menu list-->
<ion-list>
</ion-list>
</ion-content>
</ion-menu>
then have ion-navbar in each page you need toolbar.
<ion-header no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
Now, your next requirement is to have nested menus
// Menu model
export interface MenuOptionModel {
iconName: string;
displayName: string;
component: any;
subItems?: Array<MenuOptionModel>;
}
export class MyApp {
showSubmenu: boolean = false;
options: any[];
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
this.initializeApp(platform, statusBar, splashScreen);
this.getMenuOptions();
}
getMenuOptions() {
this.options = new Array<MenuOptionModel>()
// Load simple menu options
// ------------------------------------------
this.options.push({
iconName: 'icon_home',
displayName: 'HOME',
component: HomePage
});
this.options.push({
iconName: 'icon_settings',
displayName: 'Expenses',
component: null,
subItems: [
{
displayName: 'Exp 1',
component: Exp1Page
},
{
displayName: 'Exp 2',
component: Exp2Page
}
]
});
}
menuItemHandler() {
this.showSubmenu = !this.showSubmenu;
}
Menu Template Page
<ion-list>
<div *ngFor="let option of options">
<button menuClose ion-item *ngIf="!option.subItems" class="menu-style" (click)="openPage(option)">
<ion-label text-wrap mode="md" >
<ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon>
{{ option.displayName }}
</ion-label>
</button>
<div *ngIf="option.subItems && option.subItems.length > 0" class="div-sub-item">
<button ion-item (click)="menuItemHandler()">
<ion-label text-wrap mode="md">
<ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon>
{{ option.displayName }}
</ion-label>
<ion-icon name="icon_down" aria-hidden="true" role="presentation" item-right></ion-icon>
</button>
<div class="settings-menu-divider">
</div>
<ion-list mode="md" >
<div *ngFor="let item of option.subItems" id="side-nav" mode="md">
<button menuClose ion-item submenu-item class="submenu-style" *ngIf="showSubmenu" (click)="openPage(item)"
mode="md">
<ion-label text-wrap mode="md">
<ion-icon name="icon_bullet" aria-hidden="true" role="presentation"
item-left ></ion-icon>
{{ item.displayName }}
</ion-label>
</button>
<div *ngIf="showSubmenu" class="sub-menu-divider"></div>
</div>
</ion-list>
</div>
</div>
</ion-list>
I am having a little challenge trying to re-position an icon in an ion-card header to the right. Check my code samples and pictures below.
this is my code
...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
but the picture below shows what i would love to achieve
I finally figured out the ultimate solution. It is just adding style="float:right;"
...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span style="color:blue">{{account.title}}</span>
<ion-icon style="float: right;" (click)="takeAction(account.$key)" name="more">
</ion-icon>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
Notice how I placed the ion-header contents into an ion-item element
You could try using ion-row and ion-col with col-{width}.
<ion-card-header>
<ion-row justify-content-between>
<ion-col col-11>
<span item-left>{{account.title}}</span>
</ion-col>
<ion-col col-1>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-col>
</ion-card-header>
They are both components of ion-grid which works similar to the grid layout of bootstrap.
Use a div container and pull that div to right. HTML should look like below:
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right>
<div class="pull-right">
<ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon>
</div>
</span>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
In CSS add following:
.pull-right {
float: right;
}
You could also use the popular flexbox module. Just add the following 2 CSS properties to the parent element.
<ion-card-header>
<div style="display: flex; justify-content: space-between;">
<h1>Left Content</h1>
<ion-icon name="more"></ion-icon>
</div>
...
</ion-card-header>
Here you can find another tutorial about flexbox with a good explanation and some nice, visual appealing examples.
The snippet above results in something like this:
<ion-card>
<ion-card-header>
<ion-card-subtitle color="primary">Subtitle</ion-card-subtitle>
<ion-card-title>
Title
<ion-icon color="primary" style="float:right" name="arrow-back"></ion-icon>
</ion-card-title>
</ion-card-header>
<ion-card-content>
This is some card content
</ion-card-content>
</ion-card>
How to add text over the image in ionic1 slides
i need to display the text over image in the ionic slide. what should be stylesheet value for the text i need to set?
here is title property.
.slide-title {
margin-top: 2.8rem;
}
and here is the image property
.slide-image {
max-height: 100%;
max-width: 100%;
margin: 18px 0;
}
and here is the code for displaying slides
<ion-slides pager>
<ion-slide *ngFor="let slide of slides">
<ion-toolbar>
<ion-buttons end>
<button ion-button color="primary">Skip</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image" width="100%" height="100%"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-slide>
<ion-slide>
<ion-toolbar>
</ion-toolbar>
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
<h2 class="slide-title">Ready to Play?</h2>
<button ion-button large clear icon-right color="primary">
Continue
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-slide>
</ion-slides>
</ion-content>
2 ways to do this:
Setting the image as background-url to the outermost container. And then specify the title and other things in this container.
Outermost container will have position: relative. Have your image <img/> inside this container. All other inner containers (title and etc), will have position: absolute; and then actual position accordingly. Like top: 5%; left: 5%;
I have tried both the solutions in my app in the past. Both works. Not tried with your code though. Let me know about specifics if you need.
I have a problem because I can't change the colour my ion-list.
My .html is like this:
<ion-header>
<ion-navbar>
<ion-title>
Contactos
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="telefonos" padding>
<ion-list class="MyList" >
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
<div align="center">
{{item.title}}
</div>
</button>
</ion-list>
</ion-content>
and my .scss in like this:
.MyList{
background-color: #58B43F;
color : #ffffff !important;
box-shadow : 0px 6px 10px #888888;
}
box-shadow work fine, but my list is still white and the letters black.
Somebody know what is the problem?
Thanks in advance.
Best regards.