ILLA components

​

ILLA erbjuder dussintals färdiga komponenter för att snabbt bygga webb-front-end gränssnitt.

​

Komponent lista

​

Inputs

• Input: Används för att få den kortare strängen inmatad av användare

• Nummerinmatning: Används för att få in ett nummer av användare.

• Redigerbar text: Används för att visa en sträng och växla till ett redigeringsläge när du klickar.

• Textarea inmatning: används för att få den långa strängen in av användare

• Uppladdning: Används för att plocka lokala filer och tolka dem i base64-data. Klicka här för att läsa mer om Ladda upp

• Kommer snart
  • Inspelning
  • Reglage
  • Range slider
  • Rik textinmatning
  • JSON editor

​

Välj indata

• Switch: En switch som kan returnera sant eller falskt

• Välj: Visa alla alternativ i listrutan och tillåt användare att välja

• Radiogrupp: Visa alla alternativ och tillåta användare att välja en av dem

• Kryssningsgrupp: Visa alla alternativ och tillåta användare att välja flera alternativ

• Cascader: Används för att visa och välja en uppsättning av tillhörande datamängd

• Radioknapp: Visa alla alternativ i en knappstil. Tillåt användare att välja en av dem.

• Kommer snart
  • Flera val
  • Välj träd

​

Kalender ingångar

• Datum: Används för att ange ett datum. Tillåt anpassat dataformat.

• Datumintervall: Används för att ange ett datumintervall. Tillåt anpassat dataformat.

• Datum tid: Används för att ange ett datum och tid. Tillåt anpassat dataformat.

• Kommer snart
  • Tid

​

Presentation

• Text: Den används för att visa strängar och gör det möjligt att få dynamisk data med JavaSript. Stöd markdown syntax. Klicka här för att lära dig mer om det.

• Bild: Används för att visa bilder. Bildkällan kan vara en URL eller base64-data.

• Knapp: Klicka för att utlösa motsvarande affärslogik

• Icon: Används för att uttrycka åtgärder, tillstånd, kategorisera data och utlösa händelser när du klickar på

• Statistiken: Används för att visa statistiknummer

• Betyg: Används för att ange eller visa betyg

• Bar progress: Används för att visa förloppet

• Circle progress: Används för att visa förloppet

• Timeline: Används för att visa information om tidsflöde, vanligtvis inspelning händelser i tid genom flashback, spåra vad användaren gör nu och vad han har gjort tidigare.

• Divider: Används för att separera olika innehåll

• Flikar: Flikar kategoriserar innehållet, för att presentera en stor mängd information i ett begränsat utrymme. Användare kan enkelt växla mellan flikpaneler utan att övergå från en sida till en annan

• Meny: Används för att visa sidstruktur, styra sidhopp eller utlösa andra händelser

• Behållare: Gruppera komponenter i kort som stöder flera vyer. Klicka här för att lära dig mer

• Blankett: Packa data av inmatningskomponenterna i ett objekt som värdet av formulärkomponenten, som kan skickas direkt till API:et

• Lista: Anpassa komponenterna i listan och visa data

• Modal: Visa data eller utföra operationer genom ett flytande lager, vilket gör användargränssnittet mer användarvänligt

• PDF: Stöd för en PDF-URL eller base64-kodad data

• Video: Stöd de flesta videotjänster eller en direkt länk till alla vanliga videofiltyper.

• Karusell: Bild karusell.

• Kommer snart
  • Ljud
  • Steg
  • Kollapsbar
  • Kart ruta

​

Data

• Sjökort: Visualisera dina data, stöd kolumndiagram, linjediagram spridningsdiagram, cirkeldiagram. Klicka här för att läsa mer om det.

• Tabell: Ett vanligt sätt att visa och interagera med dina data. Du kan sortera, filtrera, sidnumrera och ladda ner rader av information. Tabeller stöder även val av rader och anpassade kolumner. Klicka här för att läsa mer om det.

​

Sök efter en komponent

Du kan klicka på fliken INSERT i högerpanelen för att komma in i komponentlistan. Ange komponentnamnet och sök efter komponenten genom inmatningsrutan ovan.

​

Använd händelsehanteraren för att utlösa händelser

Ta knappkomponenten som ett exempel, du kan ställa in en händelsehanterare för komponenten genom den bild som visas för att utlösa en åtgärd eller styra andra komponenter etc. När du klickar på en komponent eller när komponentens data ändras kan motsvarande händelser utlösas.

​

Använd komponentdata i åtgärder

Du kan använda data av komponenter i åtgärder eller andra komponenter. Med inmatningskomponenten som exempel kan du använda {{input1.value}} för att få det angivna värdet i komponenten. Olika komponenter kan ha olika dataformat. Se dataformaten via den vänstra panelen.