<button class="button button-outline button-positive">
fes
</button>
If I use ng-click, it's works fine, but I need href.
Drop the button and decorate the a element with the class names.
fes
hope this helps.
in html page:
<button menuClose ion-item (click)="openExternalPage(urlCgu)"><ion-icon name="ios-paper-outline" color="primary" item-start ></ion-icon> Conditions d'utilisation</button>
in ts page:
urlCgu:string;
this.urlCgu = 'http://xxxxxxx.com';
openExternalPage(page){
window.open(page);
}
Related
const styles = {
bgColor:{
backgroudColor: '#f9a825'
}
}
<Button color='primary' classes={fab:classes.bgColor} variant="fab" aria-label="Checkout"> Click Here </Button>
Here, I want to change the background-color. its applying, but it giving priority to Theme css.
The classes prop is applied incorrectly.
You shouldn't even use classes since you don't seem to inject any; you should use style.
<Button color="primary"
style={styles.bgColor}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
If you indeed inject classes into you component, you use it like this:
<Button color="primary"
classes={{ fab: classes.bgColor }}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
I would like to add css backdrop which allows the user to close FAB button options once it's clicked. I tried the following CSS solution from here but covers the options and cannot be seeing.
<button ion-button (click)="toggle!=toggle ">Add</button>
<div [ngClass]="{ 'blur' : toggle }">
your content
</div>
<!-- fab placed to the bottom & center -->
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="toggle!=toggle ">
<ion-icon name="arrow-dropup"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="restaurant"></ion-icon>
<div class="list-label">Meals</div>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<div [ngClass]="{ 'blur' : toggle }">
<ion-content
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-subtitle>Get Started</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
</ion-content
</div>
CSS
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
transition: -webkit-filter 200ms linear;
}
We have a similar thing in our app, but we use the backdrop as a loading screen with animations inside. I used a separate component with a high z-index:50 and if I want to have something on a higher level, I just add a lager number to the z-index of that element. I have ran some tests and it should work with ion-fab.
I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.
is there any workaround?
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdown-item-button>
</b-dropdown>
<style scoped>
.btn-clean {
color: #337ab7;
}
</style>
Generated code:
<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064="">
<button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
<div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
<button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
</button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
</button>
</div>
</div>
without "data-v-25a41064" on the button id="ddown2__BV_toggle_"
I came across the same issue today. It helped for me if I put the styling a component higher.
Vue-loader only applies scoped styles to the root element of child components.
You need to use the /deep/ CSS selector to target inside child components.
See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
In my app I have variable of String. Which is have in string name of attribute to add.
ngOnInit()
{
this.colAttibute = 'width-50';
}
or it can be equal to 'width-100'. My app is get device width and set the value of this variable on onNgInit method.
I want to set this attribute to my html code something like that:
<ion-list no-lines *ngIf="list">
<ion-list-header>
Лидеры продаж
</ion-list-header>
<ion-item class="categoryProductItem" *ngFor="let row of list;">
<ion-row wrap >
<ion-col *ngFor="let product of row" $colAttibute > <!--Here must be width-50 or width-100 attribute-->
<a ion-item detail-push (click)="onSelectItem(product)" >
<div class="categoryProductItemImage" *ngIf="product.getMainImage()">
<ion-img [src]="product.getMainImage()['small_url']"></ion-img>
</div>
<h2>
{{product.title}}
</h2>
</a>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
How to do this?
You can set the width like this:
<ion-col [attr.width-70]="flag">
Where flag is a boolean value indicating whether to apply this attribute or not.
Unfortunately, you will need to list all the available attributes in order to support all of them dynamically.
I added a ion-nav-button exactly as documented (direct descendant of the ion-view) and added an ng-click event that isn't firing.
Any idea why?
I attached a plunkr of the issue.
http://plnkr.co/edit/cZ9wDlhJJzebBr1WR3rT?p=preview
Thanks! Uri
<ion-view title="Dashboard">
<ion-nav-buttons side="right">
<button class="button" ng-click="alert('signup btn clicked');">
Signup
</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<h1>Ionic scroll</h1>
<p>On iphone tapping slightly above or below text doesn't open keyboard.</p>
<input type="text" name="name" style="border: 1px solid grey;">
</ion-content>
</ion-view>
That's because in the DashController there is no function alert(...);
The ng-click="alert('xx') is translated in to $scope.alert('xx');
So if you create in the DashController:
$scope.alert = function(text) {
alert(text);
}
it will work.
This answer is for those who are wondering why ng-click is not working even after writing the function in the Controller. Please check whether you have mentioned the controller as shown below:
$stateProvider
.state('dashboard', {
url: '/',
templateUrl: 'dashboard.html',
controller: 'DashController'
})