How to add a function to the :before tag of alert message

Ionic Framework ionic-v3
1

Here is what i should create
image
and the only way i can think for doing it, is to set those camera and gallery icons as the alert message :before and giving them background in css and so on…
what i’m Stucked in is finding a way to bind a function to their click events

2

well, i finally made it! although with a bit of some dirty css tricks, but after all here we are trying to get the best out of what we have, so here i share my code hoping it may help others

edit_avatar(){
		let alert = this.alertCtrl.create({
			message: 'ویرایش تصویر',
			cssClass:'avatar_alert',
			buttons: [
				{
					text: 'با دوربین عکس بگیر',
					cssClass:'avatar_alert_camera_btn',
					role: 'ok',
					handler: () => {
					}
				},
				{
					text: 'انتخاب عکس از گالری',
					cssClass:'avatar_alert_gallery_btn',
					role: 'ok',
					handler: () => {
					}
				},
				{
					text: 'بستن',
					cssClass:'avatar_alert_close_btn',
					role: 'ok',
					handler: () => {
					}
				}
			]
		});
		alert.present();
  	}

and as for the css part:

.avatar_alert_gallery_btn:before, .avatar_alert_camera_btn:before{
	width: 25px;
    height: 25px;
    margin-left: 20px;
    margin-top: -4px;
    content: ' ';
    position: relative;
    display: inline-block;
    float: right;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.avatar_alert_camera_btn:before{
    background-image: url(../assets/imgs/camera.svg);
}
.avatar_alert_gallery_btn:before{
	background-image: url(../assets/imgs/gallery.svg);
}
.avatar_alert_camera_btn span, .avatar_alert_gallery_btn span{
	width: fit-content;
	display: inline-block;
	font-weight: 400;
}
.avatar_alert .alert-message{
	text-align: right;
	padding-bottom: 16px;
	padding-top: 16px;
}
.avatar_alert .alert-head{
	display: none;
}
.avatar_alert .avatar_alert_close_btn{
	margin-bottom: -8px;
    margin-top: 8px;
}
.avatar_alert .alert-button-group.alert-button-group-vertical:after {
    width: 106%;
    height: 1px;
    border-bottom: #dedede solid 1px;
    content: ' ';
    position: absolute;
    right: 0;
    bottom: 40px;
}

I would love to hear any comments on what i have done here, and other possible ways it could have been done better

1 Like
3

i love your language

ساخت و نصب کابینت