IONIC中 AlertController和 ActionSheetController的自定义样式

最新推荐文章于 2023-11-01 14:28:04 发布

蒿豪郝灬号

最新推荐文章于 2023-11-01 14:28:04 发布

阅读量2.2k

点赞数

分类专栏： IONIC 文章标签： IONIC AlertController ActionSheetController CSS样式

本文链接：https://blog.csdn.net/qq_41868796/article/details/82494283

版权

IONIC 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

AlertController

先看对比效果

实现

html

<!--
  Generated template for the AutoCssPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>Auto CSS</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-grid>
    <ion-row>
      <ion-col>
        <button ion-button (click)="ShowAlertController()"> AlertController </button>
      </ion-col>
    </ion-row>

    <ion-row>
        <ion-col>
          <button ion-button (click)="ShowActionSheetController()"> ActionSheetController </button>
        </ion-col>
      </ion-row>

  </ion-grid>

</ion-content>

css

  ion-row{
        ion-col{
            button{
                width: 100%;            
                border-radius: 5px;
            }
        }
    }

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController,ActionSheetController  } from 'ionic-angular';

/**
 * Generated class for the AutoCssPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-auto-css',
  templateUrl: 'auto-css.html',
})
export class AutoCssPage {

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public alertCtrl: AlertController,
    public actionSheetCtrl: ActionSheetController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AutoCssPage');
  }

  ShowAlertController() {
    let confirm = this.alertCtrl.create({
      cssClass: 'twoBtn',
      message: '你确定删除？',
      buttons: [{
        text: '取消',
        handler: () => {
          console.log('Disagree clicked');      
        }
      },
      {
        text: '确定',
        handler: () => {
          this.OneBtn();
          console.log('Agree clicked');
        }
      }
      ]
    });
    confirm.present();
  }

  OneBtn() {
    let alert = this.alertCtrl.create({
      cssClass: "oneBtn",
      message: "删除成功",
      buttons: [{
        text: '确定',
        handler: () => {
          console.log('Ok');
        }
      }]
    });
    alert.present()
  }

  ShowActionSheetController(){
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select your function',
      cssClass:'ascCss',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'ios-camera-outline',
          role: 'TakePhoto',
          handler: () => {
            console.log('Take Photo clicked');      
          }
        }, {
          text: 'Photo Library',
          icon: 'ios-image-outline',
          role: 'PhotoLibrary',
          handler: () => {
            console.log('Photo Library clicked');        
          }
        }, {
          text: 'Cancel',          
          role: 'cancel',         
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });

   actionSheet.present();   
  }

}

app.css

// http://ionicframework.com/docs/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

 //单个按钮
.oneBtn{
   
    .alert-wrapper {
        border-radius: 10px;
      }
  
  .alert-title {
    font-size: 1.8rem;
    text-align: center;
    margin-top: -10px;
  }
  
   .alert-button-group {
      padding: 0;
      border-top: 1px solid #e1dce6;
      justify-content: center;
    }
  
   .alert-message {
      max-height: 240px;
      font-size: 1.4rem;
      text-align:center;
    }
  
  .alert-button {
    width:100%;
    margin:0;
    .button-inner {
      justify-content: center;
    }
  }

}

//两个按钮
.twoBtn{
   
    .alert-wrapper {
        border-radius: 10px;
      }
  
  .alert-title {
    font-size: 1.8rem;
    text-align: center;
    margin-top: -10px;
  }
  
   .alert-button-group {
      padding: 0;
      border-top: 1px solid #e1dce6;
      justify-content: center;
    }
  
   .alert-message {
      max-height: 240px;
      font-size: 1.4rem;
      text-align:center;
    }
  
  .alert-button {
    width: 50%;
    border-left: 1px solid #e1dce6;
    margin:0;
    .button-inner {
      justify-content: center;
    }
  }
      
}


.ascCss {
    .action-sheet-group {
      width: 98%;
      margin-left: auto;
      margin-right: auto;
      border-radius: 10px;
      margin-bottom: 5px;
  
      .action-sheet-title {
        font-size: 1.6rem;
        color: #000;
        background: #fefef9;
        text-align: center;
      }
  
      .disable-hover {
        border-top: 1px solid #e1dce6;
  
        .button-inner {
          .icon {
            color:aqua;
          }
        }
      }
  
      .action-sheet-cancel {
        margin-bottom: 0px;
  
        .button-inner {
          justify-content: center;
        }
      }
    }
  
    .action-sheet-group:last-child {
      padding-bottom: 0;
    }
  }