Icon Position Variants Demo

Default - Icon End (Helemaal Rechts)

Dit is de standaard positie. De icon staat helemaal rechts uitgelijnd met justify-content: space-between.

Ongeacht de lengte van de titel, blijft de icon altijd helemaal rechts staan. Dit geeft een strakke, uitgelijde look.

Ideaal voor professionele interfaces waar consistente uitlijning belangrijk is.

Icon Start (Links)

Met pm7-accordion--icon-start staat de icon links van de titel. Dit wordt bereikt met flex-direction: row-reverse.

Deze layout wordt vaak gebruikt in navigatie menus of wanneer de icon als visuele indicator voor de hele sectie dient.

Perfect voor file explorers of boom structuren waar de expand/collapse actie aan het begin verwacht wordt.

Icon Inline (Direct na titel)

Met pm7-accordion--icon-inline staat de icon direct 10px naast de titel. Dit gebruikt justify-content: flex-start met margin-left: 10px op de icon.

De icon "plakt" aan de tekst, wat een compactere weergave geeft. Er is geen lege ruimte tussen titel en icon.

Ideaal voor minimalistische designs of wanneer de accordion items korte labels hebben.

Vergelijking - Alle drie naast elkaar

Default (Icon End):

Icon staat helemaal rechts

Icon Start:

Icon staat links van de titel

Icon Inline:

Icon staat direct na de titel