È possibile posizionare $ mdToast nella parte superiore della pagina per la visualizzazione ridotta?

Mi piacerebbe avere un brindisi con i messaggi del sito (come la notifica di successo o di errore sull'ultima azione) visualizzato nella parte superiore della pagina.

docs materiale angolari say è possibile posizionare un brindisi in alto:

posizione - {string =}: Dove collocare il brindisi. Disponibile: qualsiasi combinazione di 'bottom', 'left', 'top', 'right'. Predefinito: "in basso a sinistra".

La posizione superiore funziona bene per i browser desktop con larghezza> = 960px ma viene ignorata quando la larghezza diminuisce (quindi il pane tostato è sempre in basso) - perché? E anche sui dispositivi mobili è sempre in fondo.

fonte

2016-03-12 Artem Vasiliev

probabilmente stai andando ad avere per estendere/sovrascrivere il cotto in CSS – tuckerjt07

Quindi a quanto pare che non è supportata da Angular materiale (come da v1.1.0.rc1) con schermi con larghezza inferiore a 960px, ma possiamo avere una soluzione del genere:

<body ng-app="myApp"> 
    <div layout-fill> 
    <md-toolbar ng-cloak> 
     <div class="md-toolbar-tools"> 
     <md-button>My app</md-button> 
     </div> 
    </md-toolbar> 
    <div id="toaster"></div> 
    <md-content id="content" ng-cloak> 
     ... 
    </md-content> 
    </div> 
</body>

CSS:

#toaster { 
    position: fixed; 
    top: 56px; 
    height: 48px; 
    left: 0; 
    width: 100%; 
    z-index: 10000; 
}

JS:

$mdToast.show($mdToast.simple() 
    .textContent('hello!') 
    .parent(document.querySelectorAll('#toaster')) 
    .position('top left') 
    .hideDelay(false) 
    .action('x'));

Risultato: http://screencast.com/t/B1U8aXaFcd

Ciò manterrà anche il brindisi nella sua posizione quando si scorre la pagina. Ma con questa soluzione il nascondiglio animato continuerà a spostare il messaggio verso il basso, non in alto. Nel mio vero progetto ho finito per non lottare contro MD e avere il brindisi in fondo, ma io uso questo approccio per mantenere la sua posizione quando si scorre la pagina.

fonte

2016-04-06 14:06:51

Secondo le Google Material Design docs (miei momenti salienti):

snackbar fornire un feedback leggero su un'operazione, mostrando un breve messaggio nella parte inferiore dello schermo. Gli snack possono contenere un'azione.

Se a dare un'occhiata nella angular-material.css (come da v.1.0.5):

@media (max-width: 959px) { 
    md-toast { 
    left: 0; 
    right: 0; 
    width: 100%; 
    max-width: 100%; 
    min-width: 0; 
    border-radius: 0; 
    bottom: 0; 
    } 
    ... 
}

Non è possibile inserire un brindisi sugli schermi con una larghezza inferiore che 960px fuori dalla scatola (a causa del margine bottom: 0), perché il team di angular-material ha appena implementato le specifiche che non definiscono questa possibilità.

Cercare di estendere/sovrascrivere il css per ottenere quello.

fonte

2016-03-17 15:19:54 iulian

Grazie @iulian! Sì, ho visto quel MD doc, mi sono chiesto perché il team di Angular Material non ha chiarito che l'opzione di posizione per $ mdToast funziona solo per schermi di dimensioni maggiori. Sembra che potrebbero supportare dimensioni più piccole nelle prossime versioni (o correggere i documenti:) –

Ecco una soluzione CSS:

@media (max-width:959px) { 
    md-toast { 
    bottom: unset !important; 
    } 
}

Spero che questo aiuti.

fonte

2017-01-17 01:55:02

Prova questo:

HTML:

<body layout="column"> 
<!-- body ---> 
</body>

CSS:

body { 
    overflow-y: hidden !important; 
}

fonte

2017-10-24 14:16:57

È possibile posizionare $ mdToast nella parte superiore della pagina per la visualizzazione ridotta?

risposta

Problemi correlati