Pages

Pages are routes for your site, a page is the equivalent of an HTML file in your public folder. Like Components, Pages are written in XTML.

Creating a page.

Open up your pages directory and create a new file called index.xtml. This will be the entrypoint for your site, the home page.

Inside, we’ll make it look like a normal HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

But the difference here, is that we can use Etcher components inside of our page. Let’s use the Navigation component we created in the Components section.

<!-- ... -->
<body>
    <etcher-Navigation />
</body>
<!-- ... -->

Now let’s say we want to pass some data to our component. We can do that by setting the matching attributes on the component.

For Computed Attributes, we prefix the attribute with #.

Learn more about Computed Attributes.

<etcher-Navigation #data={{
    some: "data"
}} />

Conditional Rendering