Fluid Tipp 13: Inhalt von "Sections" Variablen zuweisen


Es ergibt durchaus Sinn, Sektionen zu verwenden, um doppelten Code zu vermeiden. Es kann zusätzlich noch hilfreich sein, den Inhalt einer Variable zuzuweisen. Diese ist danach auch beliebig oft wiederverwendbar und kann vordefinierte Argumente übergeben. Im folgenden Beispiel ist das gut zu erkennen.

<!-- Using f:render to make "blocks" of output -->
Rendering into a variable and then using that variable
can make the template more readable. This example is
VERY small; the bigger and more costly the rendering is,
the more sense it makes to use this trick.

<f:section name="Icon">
  <span class="icon-{icon}"></span>
</f:section>

{f:render(section: 'Icon', arguments: {icon: 'twitter'}) -> f:variable(name: 'twitterIcon')}
{f:render(section: 'Icon', arguments: {icon: 'facebook'}) -> f:variable(name: 'facebookIcon')}

And use them as frequently as we want:

<div class="share">
  Share here!
  {twitterIcon -> f:format.raw()}
  {facebookIcon -> f:format.raw()}
</div>

<div class="also-share">
  Or here!
  {twitterIcon -> f:format.raw()}
  {facebookIcon -> f:format.raw()}
</div>

Kategorien

  Devblog

Hat dir der Artikel gefallen?

Werkraum News:

Zusammenarbeit an einem Projekt in Figma mit Multiplayer

Re­mote De­sign mit Figma

Figma ist ein All-In-One Tool für den gesamten UX/UI Design Workflow mit Features, die eine enge Zusammenarbeit ermöglichen – trotz räumlicher Trennung.