2016-05-09 26 views
9

Czy istnieje sposób na uporządkowanie wiadomości tekstowej w 2 toastach?Stylizacja jonowych 2 tostów

Próbowałem to:

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); 
 
    }

Ale oczywiście nie można używać HTML w tekście, więc jestem zgadywania odpowiedź na moje pytanie nie jest?

Odpowiedz

18

Musisz dodać "cssClass:" yourCssClassName "" w funkcji 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", 
    }); 

niż można dodać dowolną funkcję do swojej klasy css. Ale twoja funkcja css wychodzi poza domyślną stronę ccs. Exmp:

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

Umieściłem klasę wewnątrz strony - twoja strona. scss.name twoja odpowiedź pomogła mi wyjść! Dzięki @Burhan Gül !!!: D –

1

Powinieneś być w stanie zmienić jakiekolwiek stylizacji wiadomości w css za pomocą .toast-message selektora:

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

lub, jeżeli obejrzysz docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) istnieje własność CssClass można użyć do przypisania wznieś toast za określoną klasę, a następnie nadaj jej styl.

+0

Tak, widzę, jak zmienić czcionkę itp. Ale muszę zmienić układ wiadomości za pomocą akapitów i wcięć itp. –

+2

Ahh, nie sądzę, że jest to czysty sposób na zrobienie tego od teraz ponieważ wiadomość pobiera ciąg znaków przez html (jak wskazano powyżej). Można potencjalnie edytować DOM bezpośrednio po utworzeniu komponentu, ale byłoby to kłopotliwe. Może pozwól, żeby Ionic wiedział, że ta funkcja byłaby przydatna. –

+0

Dzięki Pat, tego się obawiałem. –

1

Można to zrobić, ale trzeba zmodyfikować sam szablon komponentu tostowego.

Via Explorer: \ node_modules \ \ jonowy kątowe elementy \ tosty \ toast.js

Zmień linię 194 (szablon): {{d.message}} do <div [innerHTML]='d.message'></div>

+1

Niezalecane, ponieważ będziesz nadpisywać główne pliki jonowe, a zatem wszelkie aktualizacje z jonizacji złamią wprowadzone przez ciebie zmiany. Uczyni to również utrzymanie projektu. Zwłaszcza jeśli pracują nad nim inni deweloperzy. –

13

udało mi się osiągnąć zmianę koloru toster dodając niestandardowej klasy na tosterze tworzyć

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

W takim stron SCSS plik poszedłem poza domyślnym zagnieżdżone nazwy strony (bo toster jest NOT wewnątrz katalogu głównego nazwy strony jonowej). A wszystko to mimo nieco hacky Właśnie wyraźnie ukierunkowane następnego div elementu po niestandardowej klasy, które dodałem

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

mówię jej hacky bo trzeba użyć !important na nim. Możesz uniknąć ważnego! Zawijając znacznik .toast-success z .md,.ios,.wp{... Możesz zastąpić domyślny styl, zastępując główne zmienne tostera w pliku theme/variables.scss.

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

To tylko zastąpi domyślną wartość, a nie wartość niestandardową. istnieje jeszcze kilka zmiennych, które można również stylizować.

+0

To działa. Musiałem usunąć "kolor tła", który zdefiniowałem w klasie '.toast-message', aby niestandardowe tło cssClass było widoczne. – Guus

+0

Należy podkreślić, że umieszczasz .toast-success poza nazwą strony. Przeoczyłem to i spędziłem godzinę na debugowaniu, ponieważ byłem nieostrożny. = ( –

+0

zaktualizowany .. soz dla zamieszania –

3

Ionic 2 zapewnia bardzo skuteczny sposób, aby zastąpić ich styl składnik można zastąpić tostera Sass zmienną w src/theme/zmiennych.SCSS dodając

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

ten zastąpi domyślny styl proszę odnieść się do tej Overriding Ionic Sass variable

4

Pierwszy, kontroler import tosty z ionic-angular i sprawiają, że obiekt w konstruktorze.

import { ToastController } from "ionic-angular"; 

constructor(private _tc: ToastController) { 
} 

Po tym, gdzie chcesz pokazać swoją wiadomość tostową, napisz to.

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

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

Oto moja SCSS:

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

Albo można sprawdzić najlepszym przykładem z tego link. Myślę, że to ci pomoże. :)

Albo sprawdź odpowiedź na ten link.

+0

Dziękuję skm :) –

0

Jeśli zdefiniować własną klasę css w app.scss (nie w page.scss) można projektować je z .toast-wrapper i .toast.message ma potrzeby korzystania > div{

Przykład:

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

w temacie/variables.scss można dokonać domyślne

przykładzie (czerwony i mało przejrzysty):

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