在页面中指定离子组分 css class

Question

我正在使用 ionic 2 和 angular 2 开发一个应用程序，我在其中使用了 ionic 2 组件 ModalController。

我没有找到改变 ModalController 大小的方法或配置。但是，我想在不同的尺寸上使用它，即在我使用它的每个页面上指定不同的尺寸。它的大小来自 ionic 2 css class modal-wrapper。如果我覆盖 class 或用于计算大小的全局变量，则此调整适用于全局。换句话说，它没有在不同的页面中模块化。我发现在 angular 2 中可以将样式单独应用于每个组件： https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles

然而，这在 modal-wrapper 的情况下不起作用。我的问题是：

可以用这种方式覆盖标准 ionic 2 class，还是它只适用于 html tags？
可以这样应用 scss 规则吗？如何？ modal-wrapper 定义了 scss 规则。

Answer 1

I did not find a way or a configuration that changes the size of the ModalController. I want however to use it on deverse sizes, namely to specify a different size on each page I use it.

每次显示一个页面时，都会向 <ion-page> 元素添加一个带有该页面 Component 名称的 class。例如，如果我创建一个新组件用作名为 CustomModalPage 的模式，您将在 html 中看到添加了一个 custom-modal-page class。

<ion-page class="show-page custom-modal-page "> ... </ion-page>

您可以使用 class 更改给定模态框的样式，而不会影响应用程序的其余模态框。 请注意，这只是我找到的一种解决方法，我不确定它是否会以某种方式破坏其他东西。

首先，我创建了一个包含两个按钮的页面，一个将打开自定义模式，另一个将打开默认模式。

.html代码：

<ion-header>

  <ion-navbar>
    <ion-title>ModalController Demo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <h5>ModalController with custom size</h5>

    <button (click)="presentCustomModal()">Open Custom Modal</button>

    <button (click)="presentDefaultModal()">Open Default Modal</button>

</ion-content>

.ts代码：

import { Component } from '@angular/core';
import { NavController, ModalController, ViewController } from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',
})
export class ModalControllerCustomSizePage {

    constructor(private navCtrl: NavController, private modalCtrl: ModalController) {

    }

    presentCustomModal() {
        let customModal = this.modalCtrl.create(CustomModalPage);

        customModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        customModal.present();
    }

    presentDefaultModal() {
        let defaultModal = this.modalCtrl.create(DefaultModalPage);

        defaultModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        defaultModal.present();
    }

}

/* ********************
    Custom modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar dark>' +
                        '<ion-title>My custom modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class CustomModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

/* ********************
    Default modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar>' +
                        '<ion-title>Default modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class DefaultModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

请注意，我将用作模态框的两个组件包含在同一个 .ts 文件中，只是为了使其更易于阅读。

完成后，我们可以通过添加一些样式规则来更改自定义模态框的样式：

.custom-modal-page {
    height: 25%;
    position: absolute;
    top: 75%;

    ion-content {
        background-color: #333;
        color: #eee;
    }
}

如您所见，这些样式将仅应用于自定义模式而不是默认模式。由于我们没有修改 modal-wrapper 但我们确实修改了它的内容，因此 modal-wrapper 将禁用页面的其余部分，直到我们关闭模式。

在页面中指定离子组分 css class

Specify ionic component css class in page

javascript

css

typescript

ionic2

angular