Share
I denna del av vår LLM-serie (MDL) ser vi på menynkomponent. Det här är en komponent som du ibland kan behöva tillhandahålla en kontextuell meny med tillgängliga åtgärder.
I Facebook kan du till exempel se en kontextuell meny som används i sidofältet där en lista med online och offline-vänner visas. Menyn ligger längst ner, inline med sökformuläret, illustrerat med a redskap ikon.
Facebooks sidomenyns kontextmeny.Det finns ett annat bra exempel i Gmail. Du kan hitta den här kontextuella menyn inline med Inkorg fliken, under Komponera knapp. Det ger åtgärder för att sortera inkommande meddelanden i din inkorg för bättre e-posthantering.
I denna handledning kommer vi att se hur man implementerar en kontextuell meny med MDL-menykomponenten. Men innan vi börjar, lägger du till MDL-biblioteken - stilarken och JavaScript-till huvud av ditt dokument.
En gång gjort, låt oss gå!
Låt oss anta att vi har en webbplats för vår verksamhet, och verksamheten har nu flera avdelningar i olika länder. Nu behöver vi webbplatsen presenteras på flera språk. Det här är ett bra scenario där vi kan använda menykomponenten på vår hemsida: att byta språk.
För att bygga denna språkomkopplingsmeny börjar vi med att skapa ett ikonknappelement med en id så vi kan ansluta den till menyn. Vi använder ikonen för materialdesignspråk.
Känn dig fri att välja en platt knapp, om du tycker det passar mer för den övergripande utformningen av din webbplats, till exempel:
Därefter lägger vi till listan över språk. Innan vi gör det måste vi bestämma var menyn ska visas i förhållande till knapppositionen. Beroende på webbplatsens layout kan språkomkopplaren visas i navigeringen. Vi kan också lägga till den någonstans längst ner i sidfoten.
Om vi hittar positionen längst ned till höger på webbplatsen lägger vi till menyn med hjälp av Modifier-klassen: MDL-menyn - övre högra. Menyn, som klassnamnet antyder, kommer att visas längst upp till vänster om knappen. Byt ut klassen med någon av följande klasser för att placera menyn på olika sätt:
Accentsconagua
MDL-menyn - nedre högraMDL-menyn - nedre vänstra: Detta är standard om ingen annan klass är associerad med menyn. Menyn visas längst ner, vänsterjusterad.MDL-menyn - övre vänstraVi kunde lägga till menyn någonstans. Men det är bättre att hålla det nära, i samma behållare som knappen.
Saken att tänka på för menyuppsättningen är för attribut. Som du kan se ovan, för attributvärdet måste matcha id av knappen.
Om knappen är placerad högst upp på webbplatsen ska menyn visas längst ner, genom att lägga till MDL-menyn - nedre högra klass.
En annan möjlig tillämpning av menykomponenten är att förbättra vårt bloggvykort från den tidigare handledningen. Där har vi inlägget med en delningsknapp; vi kan använda menykomponenten för att tillhandahålla alternativ för att välja sociala nätverk:
MDL-menykomponenten är enkel att implementera. Som vi har lärt oss här krävs det ett oordnat listelement med några klasser, och då har vi menyn redo att gå så enkelt som det.
I nästa handledning kommer vi att se hur man anpassar alla komponenter som vi hittills har använt. Vi ses där!
