Step 3 — Components

How components work

Any .html file in your components/ directory becomes a usable custom tag. The filename maps to the tag name with a what- prefix.

Props and defaults

The <what> block inside a component declares its props and default values. Props become template variables inside the component.

<!-- components/info-box.html -->
<what>
props = "type, title"
defaults.type = "info"
</what>
<div class="info-box-#type#">
  <strong>#title#</strong>
  <slot/>
</div>

<slot/> is where child content goes when you use the component.

Live example — the info-box component

This project includes a components/info-box.html component. Here it is in use with three different type prop values:

<what-info-box type="info" title="Information">
  This is an informational message.
</what-info-box>

<what-info-box type="warning" title="Watch out">
  This uses type="warning".
</what-info-box>

<what-info-box type="success" title="All good">
  And type="success" for green.
</what-info-box>

Stat card — a second component

This project also includes a components/stat-card.html component with label, value, and color props. Here are four live instances:

<!-- components/stat-card.html -->
<what>
props = "label, value, color"
defaults.color = "indigo"
</what>
<div style="border-left: 3px solid #color#; ...">
  <div class="stat-value">#value#</div>
  <div class="stat-label">#label#</div>
</div>

<!-- Usage -->
<what-stat-card label="Users" value="1,024"></what-stat-card>
<what-stat-card label="Revenue" value="$42k" color="green"></what-stat-card>

Components with conditionals

Components can use <if> inside their template to conditionally render parts based on prop values. The stat-card uses this to pick a border color. The info-box uses it for its background.

<!-- Inside a component: conditionals on props -->
<if color == green>
  <!-- Green styling -->
</if>
<if color == red>
  <!-- Red styling -->
</if>

This page uses a component too

The sidebar navigation you're looking at right now is components/tutorial-layout.html. It receives an active_step prop from each page, highlights the correct nav item, and renders the prev/next footer. The layout is assigned via site/tutorial/application.what.

<!-- site/tutorial/application.what -->
layout = "components/tutorial-layout.html"

<!-- site/tutorial/3.html -->
<what>
active_step: 3
title: "Step 3 — Components"
</what>