Ontwerp van onderdelen

Het zou mogelijk zijn om eenvoudig elementen op de lege ruimte van het canvas te plaatsen, maar het is beter om te proberen alles meteen netjes en overzichtelijk te maken. Daarom gaan we om te beginnen het werkblad vormgeven. Laten we een component (Container) toe aan het canvas waarin we alle andere elementen zullen plaatsen. Na het toevoegen moet je op het tandwielpictogram klikken en doorgaan naar de configuratie van deze container.

Containerinstellingen

Laten we de beschikbare instellingen doornemen.

• Name - de naam waaronder we naar deze container kunnen verwijzen in de bedrijfsprocessen van de applicatie. Bijvoorbeeld, als we een bedrijfsproces willen maken om enkele instellingen van deze container te wijzigen.
• Direction - de richting waarin de elementen in de gegeven container worden gelegd. Horizontaal, als u ze in een rij wilt rangschikken, de een na de ander, of omgekeerd, verticaal, als de elementen onder elkaar gaan.
• Wrap - de uitvoer van elementen instellen. Moeten ze op dezelfde regel staan (nowrap), of kunnen ze gewrapt worden (wrap).
• Alignment - hoe de elementen in de container moeten worden uitgelijnd (aparte instelling voor horizontale en verticale uitlijning).
• Size - containergrootte. Deze kan worden ingesteld als een percentage van de beschikbare ruimte of een strikt vaste grootte in pixels hebben.
• Max Width -de maximaal toegestane breedte (indien deze niet strikt is ingesteld en varieert afhankelijk van de inhoud).
• Margin/Padding - inspringen van containerranden. respectievelijk extern of intern.
• Image, Gradient or Overlay (Background color) - de mogelijkheid om de gewenste achtergrond in te stellen. U kunt een specifieke kleur kiezen (of een combinatie van verschillende kleuren met een kleurverloop) of een achtergrondafbeelding selecteren.
• Border - selectie van het kader en het uiterlijk ervan (kleur, dikte, afrondingsstraal).
• Visible - zichtbaarheid van het element (en van alle geneste elementen).

De geselecteerde instellingen zijn te zien in de schermafbeelding. Natuurlijk kunt u experimenteren en ze wijzigen, en uw eigen unieke ontwerp kiezen.

Laten we een andere toevoegen aan de aangemaakte container. We voegen er de nodige invoervelden aan toe. Stel deze in op verticaal, gecentreerd, 40% breedte en links opgevuld (padding-left 20px).

Toepassingscomponenten

Voeg vervolgens de componenten zelf toe aan de container. Ons bedrijfsproces accepteert twee getallen van het type float. Om ze in te voeren, moet u twee Input componenten (float), a Button, die het rekenproces starten, en een kleine visuele aanpassing maken om hun Label.

Laten we nog een blok toevoegen waarin we aangeven wat we in het algemeen van plan zijn te berekenen (optellen, aftrekken, enz.). We stellen de breedte in op 30% met de elementen verticaal, gecentreerd en rechts uitgelijnd (end/center). We voegen 5 Label componenten toe aan de container zelf en veranderen hun tekst onmiddellijk in de gewenste.

De laatste stap in het visuele ontwerp is het toevoegen van een andere container om het berekeningsresultaat weer te geven. We voegen het toe naar analogie van de vorige container, maar we zetten de uitlijning naar rechts met een kleine opvulling aan de linkerkant. De eigenschap van deze container is dat hij aanvankelijk onzichtbaar is (de schakelaar Visible staat uit). We zetten hem aan op het moment dat we het resultaat van de berekeningen hebben. We voegen er 5 Label componenten aan toe, en we hoeven zelfs hun tekst niet te veranderen, want het blok is nog steeds onzichtbaar (het belangrijkste is om hun Name in te stellen, zodat u het benodigde element kunt identificeren bij het creëren van bedrijfsprocessen).

Als alles correct is gedaan, zien we het volgende resultaat in de webdesigner:

En dit in de gepubliceerde app: