Components

Introduction

Components are the reusable pieces of your pages: a notice, a card, a menu. A component is a .vuka.html shape with one struct and its markup in the same file. Exported fields are props; content and named slots are node props, filled with markup by the shape that uses the component.

Writing a Component

This shape declares a notice with a title, a flag and children:

html

<script lang="go">
package components

import "github.com/vuka-lang/ui/v2"

type Notice struct {
    Title string
    Important bool
    Children ui.Node
}
</script>

<aside class:important={Important}>
  <h2>{Title}</h2>
  {Children}
</aside>

Use it as a tag from another shape: <components.Notice title="Saved" important><p>Your changes are saved.</p></components.Notice>. A bare bool attribute is true. HTML attributes retain HTML names, including class, for, aria-* and data-*.

Filling a Component's Slots

A ui.Node field other than Children is a slot, filled with <slot:name>…</slot:name> directly inside the tag. A func field returning a ui.Node is a slot the component passes values to, which the caller names with let; a slice of structs takes one <slot:name> per element:

html

<script lang="go">
package pages

import (
    "example.com/app/models"
    "github.com/vuka-lang/ui/v2"
)

type Members struct { People []models.Person }
</script>

<ui.Card title="Members">
  <slot:header><button>Invite</button></slot:header>
  <ui.Table rows={People}>
    <slot:column header="Name" let={p}>{p.Name}</slot:column>
    <slot:column header="Email" let={p}><a href={"mailto:" + p.Email}>{p.Email}</a></slot:column>
  </ui.Table>
</ui.Card>

Inside the component, <slot:actions>fallback</slot:actions> renders the slot, or the fallback when the caller left it out; ui.Has(Actions) reports whether it was filled; vuka:"required" on the field makes every tag fill it. See Components and Slots.

What a Hole Accepts

Child holes accept nodes, slices of nodes, escaped strings and numbers, errors and nil. ui.Node is compatible with templ components. A static shape is created and rendered per request; a live shape retains its server instance for the connected page.

Dynamic Attributes

Use class:selected={Selected}, {attrs...} and style:color={Color} for dynamic classes, attribute sets and sanitized styles. Event attributes accept server methods or browser commands. See Templates.

Linking Between Pages

<ui.Link href="/pets">Pets</ui.Link> participates in live navigation. Ordinary <a> elements remain full-document links. active="prefix" (or "exact") with activeClass marks the link to the current page in the browser, the way to mark a layout's menu, and a <details data-vk-active-within> around such links opens on the current page (the current group); prefetch tunes fetching its page ahead. See Navigation.

Keying Repeated Components

Give siblings stable key={record.ID} values. A key identifies the same logical item across renders, preserving its live instance.

WARNING

Array positions are unsuitable when items can be reordered.

The Component Kit

The ui kit exposes components as tags, such as <ui.Card> and <ui.Button>. Use their exported fields as attributes, their Children field for content, and their named node fields as slots. ui.Table and ui.DataTable take their columns as repeated <slot:column> slots, or as a columns={…} slice built in Go. The kit uses the same node tree and live protocol as application components; no second rendering syntax is needed.

Components ​

Introduction ​

Writing a Component ​

Filling a Component's Slots ​

What a Hole Accepts ​

Dynamic Attributes ​

Linking Between Pages ​

Keying Repeated Components ​

The Component Kit ​