Styling ionic 2 toast

Question

Есть ли способ стирать текстовое сообщение в ионном тосте 2?

Я попытался это:

let toast = Toast.create({ 
 
     message: "Some text on one line. <br /><br /> Some text on another line.", 
 
     duration: 15000, 
 
     showCloseButton: true, 
 
     closeButtonText: 'Got it!', 
 
     dismissOnPageChange: true 
 
    }); 
 

 
    toast.onDismiss(() => { 
 
     console.log('Dismissed toast'); 
 
    }); 
 

 
    this.nav.present(toast); 
 
    }

Но ясно, что вы не можете использовать HTML в тексте, так что я не буду угадывать ответ на мой вопрос нет?

Answer 1

Вы должны добавить 'cssClass: "yourCssClassName" в функцию toastCtrl.

let toast = Toast.create({ 
     message: "Some text on one line. <br /><br /> Some text on another line.", 
     duration: 15000, 
     showCloseButton: true, 
     closeButtonText: 'Got it!', 
     dismissOnPageChange: true, 
     cssClass: "yourCssClassName", 
    }); 

, вы можете добавить любую функцию в свой класс css. Но функция css вышла за пределы страницы по умолчанию. Exmp:

page-your.page.scss.name { 
    //bla bla 
    } 
.yourCssClassName { 
    text-align:center; 
    } 

Answer 2

Вы должны быть в состоянии изменить какую-либо стилизации сообщения в CSS с помощью .toast-message селектора:

.toast-message { 
    font-family: Helvetica, 
    color: red 
} 

Или, если вы посмотрите на документах (http://ionicframework.com/docs/v2/api/components/toast/Toast/) есть свойство CssClass можно использовать для назначения ваш тост определенного класса, а затем стиль.

Answer 3

Вы можете выполнить, однако вам необходимо изменить сам шаблон компонента тоста.

через Проводник: \ node_modules \ ионно-Угловая \ Components \ тост \ toast.js

Изменение строки 194 (шаблон): {{d.message}} к <div [innerHTML]='d.message'></div>

Answer 4

мне удалось добиться изменения цвета тостер путь добавления пользовательского класса на тостере создать

let toast = this.toastCtrl.create({ 
    message: 'Foobar was successfully added.', 
    duration: 5000, 
    cssClass: "toast-success" 
    }); 
    toast.present(); 
} 

В том, что страницах SCSS файла я тогда пошел за пределами имени страницы по умолчанию вложенных (потому что тостер NOT внутри корень иона название страницы вещь). И хотя все это немного Hacky я просто явно ориентирована на следующий div элемент после того, как пользовательский класс, который я добавил

.toast-success { 
    > div{ 
     background-color:#32db64!important; 
    } 
} 

Я говорю его Hacky, потому что вы должны использовать !important на нем. Вы можете избежать важно! Обертывания .toast-success с .md,.ios,.wp{...

Вы можете переопределить стиль по умолчанию, перекрывая основной переменный тостер в файле theme/variables.scss.

$toast-ios-background:(#32db64); 
$toast-md-background:(#32db64); 
$toast-wp-background:(#32db64); 

Это будет только отменять значение по умолчанию, но не настраиваемое значение. есть еще несколько переменных, которые могут быть также разработаны.

Answer 5

Ионные 2 обеспечивает очень полезный способ, чтобы переопределить их компонент стиля, который вы можете переопределить тостер SASS переменный в И/темы/переменных.СКС путем добавления

$toast-ios-title-color: #f00 ; 
$toast-md-title-color:#f00; 

это будет переопределить стиль по умолчанию, пожалуйста, обратитесь к этому Overriding Ionic Sass variable

Answer 6

Первый, контроллер импорта тост из ionic-angular и сделать объект, который в конструкторе.

import { ToastController } from "ionic-angular"; 

constructor(private _tc: ToastController) { 
} 

После этого, где бы вы хотели показать свое тост-сообщение, пишите, что.

let options = { 
    message: "Your toast message show here", 
    duration: 3000, 
    cssClass: "toast.scss" 
}; 

this._tc.create(options).present(); 

Вот мой СКС:

.toast-message { 
    text-align: center; 
} 

Или вы можете проверить лучший пример из этого link. Я думаю, это поможет вам. :)

Или еще проверьте ответ на этот вопрос link.

Answer 7

Если вы определяете свой собственный класс CSS в app.scss (не в page.scss) вы можете стилизовать с .toast-обертку и не .toast.message Нет необходимости использовать > div{

Пример:

.yourtoastclass { 
    .toast-wrapper { 
    background: blue; 
    opacity: 0.8; 
    border-radius: 5px; 
    text-align: center; 
    } 
    .toast-message { 
    font-size: 3.0rem; 
    color: white; 
    } 
} 

в теме/variables.scss вы можете сделать по умолчанию

Пример (красный и немного прозрачный):

$toast-width: 75%; /* default 100% */ 
$toast-ios-background: rgba(153, 0, 0, .8); 
$toast-md-background: rgba(153, 0, 0, 0.8);