Ionic 2 警报自定义

Posted 2023-03-07

【中文标题】Ionic 2 警报自定义

【英文标题】：Ionic 2 Alert customization

【发布时间】：2017-09-15 19:17:56

【问题描述】：

我想在 Ionic 2 中自定义我的警报。我知道我可以在 variables.scss 中全局执行此操作，但我想在特定页面中修改特定的警报。

我在警报代码中尝试了 cssClass，我尝试了其他不同的东西，但它们是全局的，而不是针对特定的。

有什么办法吗？

【参考方案1】：

虽然这来自 Ionic 3，但如果您仍希望将本地更改保留在本地文件而不是 app.scss 中，则始终可以将样式放在 something.scss 文件中的 page-something 块之外。

.alert-style
    padding-left: 16px;


page-something

【参考方案2】：

只需在我命名为 alertCustomCss

的警报的 cssClass 中添加您想要的任何名称

logOut() 
  this.alrtCtrl.create(
                title: "Log out ?",
                message: "Are you sure to logout?",
                buttons: [
                    
                        text: "Cancel",
                        role: 'cancel',
                        handler: () => 
                        //something to do 
                        
                    ,
                    
                        text: "Confirm",
                        handler: () => 
                            //log Out

                        
                    
                ],
                cssClass: 'alertCustomCss'
            ).present();

为 alertCustomCss 类添加样式

.alertCustomCss
    background-color: red;
    color: white;
    button
        color: green!important;
    
    .alert-wrapper
        background: yellow;
    
    .alert-message 
        color: skyblue;
    
    .alert-title
        color: black;
    

应用以上样式后查看图片 => Image Link

【参考方案3】：

编辑你所有的AlertController.create 方法，如下所示：

const alert = this.alertCtrl.create(
    title: title,
    subTitle: msg,
    buttons: ['OK'],
    cssClass: 'alertCustomCss' // <- added this
);

并将其添加到app.scss:

.alertCustomCss 
    // text color for basic alerts
    color: white; 

    // alert modal page bg color. Warning this will remove the alert transparency
    background-color: color($colors, dark, base); 

    button 
        color: white !important; // button text color
        background-color: color($colors, secondary, base) !important;
            //button bg color
    

    .alert-message 
        color: white; // text color for confirm alerts
    

    .alert-wrapper 
        background-color: color($colors, dark, base); // bg color of alert content
    
  

【参考方案4】：

如果您使用 ionic CLI 命令ionic g page Sample1 创建了特定页面（我们称之为Sample1），您将在项目中找到一个名为 Sample1 的目录，其中包含 3 个文件：Sample1.html、Sample1.ts 和 @987654326 @。

在Sample1.scss 你会发现：

sample1-page 

在那个地方，您必须定义您的自定义 css 类或重新定义 ionic 元素样式，并且您的所有样式都只能在 Sample1 页面上使用。

希望对你有帮助

更新

由于Duannx 提到警报组件不是您页面的子级，因此如果您将 css 类放入特定页面的 .scss 文件中，它将不会应用于警报，但如果您将其放入 app.scss 它会被应用。所以这是一个例子：

app.scss

.alertCustomCss
  background-color: white;
  color: blue;
  button
      color: blue;
  

Sample1.html

<button ion-button block outline (click)="showAlert()">Alert</button>
<button ion-button block outline (click)="showAlert2()">Alert2</button>

Sample1.ts

  showAlert() 
    let alert = this.alertCtrl.create(
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    );
    alert.present();
  

  showAlert2() 
    let alert = this.alertCtrl.create(
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    );
    alert.present();
  

现在您将看到“警报”按钮将显示自定义警报，而“警报2”按钮将显示具有默认 css 样式的更改

【讨论】：

您可能需要注意组件中的选择器属性决定了元素名称。

嗨，我知道我需要在哪里做，问题是，如果不是全局警报，我无法修改它，我已经尝试过你所说的，我知道警报的类使用，但即使我覆盖它们，警报仍然保持不变。

您不能在some-page.scss 中添加警报样式，因为警报不是您页面的子页面。只需在 chrome 中检查它并查看。所以在app.scss 中添加样式是正确的答案

【参考方案5】：

在app.css 中添加样式并在page.ts 中调用它

showAlert() 
    let alert = this.alertCtrl.create(
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    );
    alert.present();

在 App.css 中

.alertCustomCss
  background-color: white;
  color: blue;
  button
      color: blue;