[英]ionic2: how to customize popover width?
I'm using Ionic2: I use a popover and I want to customize the size of every popover. 我正在使用Ionic2:我使用了一个弹出框,并且想要自定义每个弹出框的大小。 This is the popover:
这是弹出窗口:
I want to decrease it's widt. 我想减少它的浪费。 I used this code in
variable.scss
file: 我在
variable.scss
文件中使用了以下代码:
$popover-md-width:50%;
It works fine but it is applied for every popover in my application. 它工作正常,但适用于我的应用程序中的每个弹出窗口。 I want to customize the width of some popover.
我想自定义一些弹出框的宽度。 What should I do?
我该怎么办?
The create
method accepts a third parameter: create
方法接受第三个参数:
create(component, data, opts)
Where opts
is of type PopoverOptions
其中
opts
是PopoverOptions
类型的
And one of these options, is the cssClass
property: 这些选项之一是
cssClass
属性:
Option Type Description
cssClass string Additional classes for custom styles, separated by spaces.
So you can add a custom class when creating the popover: 因此,您可以在创建弹出窗口时添加自定义类:
import { PopoverController } from 'ionic-angular';
@Component({})
class MyPage {
constructor(public popoverCtrl: PopoverController) {}
presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'my-custom-popover'});
popover.present({
ev: myEvent
});
}
}
And then use that class to apply the custom styling. 然后使用该类来应用自定义样式。
In the ts file where you wrote the popover code, set a cssClass eg. 在您编写了弹出代码的ts文件中,设置一个cssClass例如。
presentPopover() {
let popover = this.popoverCtrl.create( PopoverPage, {} , { cssClass: 'custom-popover' });
popover.present();
}
Then go to your app.scss and style the popover eg. 然后转到您的app.scss并设置弹出窗口的样式。
.custom-popover .popover-content{
width: 90% !important;
color: red;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.