Share
I denne delen av LLM-serien (MDL) ser vi inn i menyenkomponent. Dette er en komponent som du noen ganger trenger å gi en kontekstuell meny med tilgjengelige handlinger.
I Facebook kan du for eksempel se en kontekstuell meny distribuert i sidelinjen der en liste over online og offline venner vises. Menyen ligger nederst, i linje med søkeskjemaet, illustrert med a utstyr ikon.
Facebooks sidebar kontekstmeny.Det er et annet godt eksempel i Gmail. Du kan finne denne kontekstuelle menyen inline med Innboks fanen, under komponer knapp. Det gir handlinger for å sortere innkommende meldinger i innboksen din for bedre e-postbehandling.
I denne opplæringen skal vi se hvordan du implementerer en kontekstuell meny ved hjelp av MDL-menykomponenten. Men før vi starter, legger du til MDL-bibliotekene - stilarkene og JavaScript-til hode av dokumentet ditt.
Når vi har gjort det, la oss gå!
La oss anta at vi har et nettsted for vår virksomhet, og virksomheten har nå flere grener i forskjellige land. Nå trenger vi nettsiden som skal presenteres på flere språk. Dette er et godt scenario der vi kan bruke menykomponenten på vår nettside: å bytte språk.
For å bygge denne språkveksjonsmenyen starter vi ved å opprette et ikonknappelement med en id så vi kan koble den til menyen. Vi bruker ikonet Material Design Language.
Du er velkommen til å velge en flat knapp, hvis du finner det mer egnet for den generelle utformingen av nettstedet ditt, for eksempel:
Deretter legger vi til listen over språkene. Før du gjør det, må vi bestemme hvor menyen skal vises i forhold til knappens posisjon. Avhengig av nettstedoppsettet, kan språkbryteren vises i navigasjonen. Vi kan også legge til det hvor som helst nederst, i bunnteksten.
Hvis vi finner stillingen nederst til høyre på siden, legger vi til menyen ved hjelp av Modifier-klassen: MDL-meny - øverst til høyre. Menyen, som klassenavnet antyder, vises øverst, til venstre for knappen. Erstatt klassen med en av følgende klasser for å plassere menyen annerledes:
Accentsconagua
MDL-meny - nederst til høyreMDL-meny - rste venstre: Dette er standard hvis ingen annen klasse er knyttet til menyen. Menyen vises nederst, venstrejustert.MDL-meny - øverste venstreVi kunne legge til menyen hvor som helst. Men det er bedre å holde det nært, i samme beholder som knappen.
Tingen å huske på menyoppslaget er til Egenskap. Som du kan se over, er det til Attributtverdien må samsvare med id av knappen.
Hvis knappen er plassert øverst på nettstedet, skal menyen vises nederst, ved å legge til MDL-meny - nederst til høyre klasse.
En annen mulig bruk av menykomponenten er å forbedre vårt bloggpost fra den forrige opplæringen. Der har vi posten med en deleknapp; vi kunne bruke menykomponenten til å gi alternativer for valg av sosiale nettverk:
MDL-menykomponenten er enkel å implementere. Som vi har lært her, krever det et uordnet listeelement med noen få klasser, og så har vi menyen klar til å gå så enkelt som det.
I neste veiledning skal vi se hvordan vi tilpasser alle komponentene vi har brukt hittil. Ser deg der!
