title: Step 3 — Components active_step: 3

Step 3 — Components

HTML files in components/ become custom tags.

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.

File
components/info-box.html
components/my-card.html
components/user-profile.html
Tag
<what-info-box>
<what-my-card>
<what-user-profile>

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:

This is an informational message. The type="info" prop gives it a blue style. This uses type="warning". The component switches its color based on this prop. And type="success" for green. One component, three looks — driven by props. 
<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>

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/application.what. 

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

<!-- site/steps/3.html -->
<what>
active_step: 3
title: Step 3 — Components
</what>
What you learned