Overslaan naar hoofdinhoud

ColumnsLayout

Openen in ChatGPT
Shadow dwc-columns-layout 24.10
Java API

De ColumnsLayout component in webforJ stelt ontwikkelaars in staat om lay-outs te creëren met een flexibele en responsieve verticale indeling. Deze lay-out biedt dynamische kolommen die zich aanpassen op basis van de beschikbare breedte. Deze component vereenvoudigt het maken van lay-outs met meerdere kolommen door automatisch de breekpunten en uitlijningen te beheren.

Horizontale indelingen

Dit kan worden gebruikt in plaats van, of in combinatie met, de FlexLayout component - een even krachtige tool voor horizontale indelingen.

Basisprincipes​

Wanneer de ColumnsLayout voor het eerst wordt aangemaakt, gebruikt deze twee kolommen om de items die aan de lay-out zijn toegevoegd weer te geven. Standaard neemt deze de volledige breedte van zijn bovenliggende elementen in en groeit deze indien nodig om extra inhoud te kunnen bevatten. De weergave van toegevoegde items kan verder worden afgestemd met behulp van Breakpoint en Alignment instellingen, die in de volgende secties in meer detail worden besproken.

Toon Code

Breekpunten​

In essentie is de ColumnsLayout ontworpen om een vloeibaar, rasterachtig systeem te bieden dat zich aanpast aan de breedte van zijn bovenliggende container. In tegenstelling tot traditionele vaste roostersystemen, stelt deze lay-out ontwikkelaars in staat om een aantal kolommen op een bepaalde breedte op te geven en berekent deze dynamisch het aantal weergegeven kolommen op basis van ingestelde Breakpoint objecten.

Dit stelt een ColumnsLayout in staat om soepel over te gaan van een meer beperkte ruimte op kleine schermen naar een bredere ruimte op grotere schermen, en biedt een responsief ontwerp aan een ontwikkelaar zonder dat er een aangepaste implementatie nodig is.

Een Breakpoint begrijpen​

Een Breakpoint kan worden gespecificeerd met behulp van de Breakpoint klasse, die drie parameters neemt:

  1. Naam (optioneel): Een breekpunt een naam geven stelt je in staat om het in toekomstige configuraties te verwijzen.

  2. Minimale breedte: Elk breekpunt heeft een specifieke reeks die bepaalt wanneer zijn lay-out wordt toegepast. De minimale breedte is expliciet gedefinieerd, en het volgende breekpunt bepaalt de maximale breedte als deze bestaat. Je kunt een geheel getal gebruiken om de minimale breedte in pixels te definiëren of een String gebruiken om andere eenheden zoals vw, %, of em op te geven.

  3. Aantal kolommen: Geef aan hoeveel kolommen een breekpunt moet hebben met dit geheel getal.

Breakpoint evaluatie

Breekpunten worden geëvalueerd in opklimmende volgorde van de breedte, wat betekent dat de lay-out het eerste overeenkomende breekpunt zal gebruiken.

Breekpunten toepassen​

Breekpunten worden op een ColumnsLayout toegepast op een van de twee manieren: tijdens de constructie, of in een List met behulp van de setBreakpoints() methode:

ColumnsLayout layout = new ColumnsLayout();

List<Breakpoint> breakpoints = List.of(
    // Eén kolom bij breedtes >= 0px
    new Breakpoint(0, 1),
    // Twee kolommen bij breedtes >= 600px
    new Breakpoint(600, 2),
    // Vier kolommen bij breedtes >= 1200px
    new Breakpoint(1200, 4));

layout.setBreakpoints(breakpoints);

De demonstratie hieronder laat een voorbeeld zien van het instellen van meerdere breekpunten bij de constructie, het gebruik van breekpunten om de Span van een component te configureren, en demonstreert de aanpassingsmogelijkheden van de ColumnsLayout wanneer de app wordt aangepast in formaat:

Toon Code

Kolom Span en spans per Breakpoint​

Kolomspans in ColumnsLayout stellen je in staat te bepalen hoeveel kolommen een item in beslag neemt, waardoor je meer controle hebt over het uiterlijk van je lay-out bij verschillende breedtes. Dit is vooral nuttig wanneer je bepaalde elementen meer of minder ruimte wilt laten innemen afhankelijk van de schermgrootte of ontwerpeisen.

Kolomspans beheren​

Standaard neemt elk item in de ColumnsLayout precies één kolom in beslag. Je kunt dit gedrag echter aanpassen door de kolomspan voor individuele items in te stellen. Een span specificeert het aantal kolommen dat een item moet innemen.

Button button = new Button("Klik hier");
layout.addComponent(button);
// Item neemt twee kolommen in beslag
layout.setSpan(button, 2);

In het bovenstaande voorbeeld neemt de knop twee kolommen in beslag in plaats van de standaard één. De setSpan() methode stelt je in staat op te geven hoeveel kolommen een component moet beslaan binnen de lay-out.

Kolomspans aanpassen met breekpunten​

Je kunt kolomspans ook dynamisch aanpassen op basis van breekpunten. Deze functie is nuttig wanneer je wilt dat een item verschillende aantallen kolommen beslaat, afhankelijk van de schermgrootte. Bijvoorbeeld, je wilt misschien dat een element één kolom in beslag neemt op mobiele apparaten, maar meerdere kolommen op grotere schermen.

TextField email = new TextField("Email");
//...
List.of(
  new ColumnsLayout.Breakpoint("default", 0 , 1),
  new ColumnsLayout.Breakpoint("small", "20em", 1),
  new ColumnsLayout.Breakpoint("medium", "40em", 2),
  new ColumnsLayout.Breakpoint("large", "60em", 3)
)
//...
//emailveld zal twee kolommen beslaan wanneer het gemiddelde breekpunt actief is
columnsLayout.setSpan(email, "medium", 2);
//...

Dit niveau van aanpassing zorgt ervoor dat je lay-out responsief en op de juiste manier gestructureerd blijft op verschillende apparaten.

Items binnen kolommen plaatsen​

ColumnsLayout biedt de mogelijkheid om items in specifieke kolommen te plaatsen, waardoor je meer controle hebt over de rangschikking van elementen. Je kunt handmatig opgeven waar een item moet verschijnen binnen de lay-out, zodat belangrijke componenten worden weergegeven zoals bedoeld.

Basis kolomplaatsing​

Standaard worden items geplaatst in de eerstvolgende beschikbare kolom, van links naar rechts. Je kunt dit gedrag echter overschrijven en de exacte kolom specificeren waar een item moet worden geplaatst. Om een item in een specifieke kolom te plaatsen, gebruik je de setColumn() methode. In dit voorbeeld wordt de knop in de tweede kolom van de lay-out geplaatst, ongeacht de volgorde waarin deze is toegevoegd ten opzichte van andere componenten:

Button button = new Button("Verzenden");
layout.addComponent(button);
// Plaats het item in de tweede kolom
layout.setColumn(button, 2);

Plaatsing aanpassen per breekpunt​

Net als bij kolomspans, gebruik je breekpunten om de plaatsing van items aan te passen op basis van de schermgrootte. Dit is nuttig voor het opnieuw ordenen of verplaatsen van elementen in de lay-out naarmate het venster verandert.

TextField email = new TextField("Email");
//...
List.of(
  new ColumnsLayout.Breakpoint("default", 0 , 1),
  new ColumnsLayout.Breakpoint("small", "20em", 1),
  new ColumnsLayout.Breakpoint("medium", "40em", 2),
  new ColumnsLayout.Breakpoint("large", "60em", 3)
)
//...
//emailveld zal verschijnen in de tweede kolom wanneer gemiddelde breekpunt actief is
columnsLayout.setColumn(email, "medium", 2); 
//...

In de volgende demonstratie, let op dat wanneer het "medium" breekpunt wordt geactiveerd, het email veld in beide kolommen beslaat en het confirmPassword veld in de eerste kolom wordt geplaatst, in plaats van zijn standaardplaatsing in de tweede kolom:

Toon Code

Vermijd botsingen

Wanneer meerdere items in een lay-out worden geplaatst met verschillende spans en/of kolomtoewijzingen, zorg ervoor dat de gecombineerde spans en plaatsingen van items in een rij niet overlappen. De lay-out probeert automatisch de ruimte goed te beheren, maar zorgvuldige vormgeving van spans en breekpunten voorkomt onbedoelde weergave van items.

Verticale en horizontale itemuitlijningen​

Elk item in de ColumnsLayout kan zowel horizontaal als verticaal binnen zijn kolom worden uitgelijnd, wat controle geeft over hoe de inhoud binnen de lay-out is gepositioneerd.

Horizontale uitlijning van een item wordt geregeld met de setHorizontalAlignment() methode. Deze eigenschap bepaalt hoe een item is uitgelijnd binnen zijn kolom langs de horizontale as.

Verticale uitlijning specificeert hoe een item is gepositioneerd binnen zijn kolom langs de verticale as. Dit is nuttig wanneer kolommen verschillende hoogtes hebben en je wilt controleren hoe items verticaal zijn verdeeld.

Beschikbare Alignment opties zijn onder andere:

  • START: Lijnt het item links in de kolom (standaard).
  • CENTER: Centreert het item horizontaal binnen de kolom.
  • END: Lijnt het item rechts in de kolom.
  • STRETCH: Strekt de component om de lay-out te vullen.
  • BASELINE: Lijnt op basis van de tekst of inhoud binnen de kolom, waarbij items worden uitgelijnd op de tekstbasislijn in plaats van op andere uitlijningsopties.
  • AUTO: Automatische uitlijning.
Toon Code

In de demo hierboven heeft de Verzenden knop ColumnsLayout.Alignment.END gekregen om ervoor te zorgen dat deze aan het einde, of in dit geval rechts, van zijn kolom verschijnt.

Item spacing​

Het beheersen van de ruimte tussen kolommen in de ColumnsLayout tussen kolommen (horizontale spacing) en tussen rijen (verticale spacing) helpt ontwikkelaars om de lay-out verder te verfijnen.

Om de horizontale spatiëring van de lay-out in te stellen, gebruik je de setHorizontalSpacing() methode:

// Stel 20px ruimte in tussen kolommen
layout.setHorizontalSpacing(20);

Evenzo gebruik je de setVerticalSpacing() methode om de ruimte tussen rijen van de lay-out te configureren:

// Stel 15px ruimte in tussen rijen
layout.setVerticalSpacing(15);
CSS eenheden

Je kunt een geheel getal gebruiken om de minimale breedte in pixels te definiëren of een String gebruiken om andere eenheden zoals vw, %, of em op te geven.

Horizontale en verticale lay-outs​

Het bouwen van responsieve en aantrekkelijke lay-outs is mogelijk met zowel de FlexLayout component als de ColumnsLayout component, evenals een combinatie van beide. Hieronder zie je een voorbeeld van de formulier gemaakt in het FlexLayout artikel, maar met een ColumnLayout schema in plaats daarvan:

Toon Code

Stijl​

Loading...