Skip to content

progress.md

Latest commit

 

History

History
147 lines (96 loc) · 4.4 KB

progress.md

File metadata and controls

147 lines (96 loc) · 4.4 KB
Raw

Progress

ui.progress · parts: Progress · elements: <progress>

Purpose

Progress is native task progress (value/max); omit value for indeterminate.

Notes

No additional notes for Progress yet.

Progress renders a native progress element; children are the fallback text.

Props

Canonical (templ, Jinja2) React / Solid HTML (Svelte, Vue, WC) Type Default Kind Description
Value value value string — passthrough attr
Max max max string — passthrough attr
AriaLabel aria-label aria-label string — passthrough attr

Also accepts: class (className in React), extra attributes (rest props in JS runtimes, Attrs in templ/Jinja2, attrs in Twig/Latte; caller wins), children.

Variants

No variants: the primitive ships no visual classes; style it with token classes via class.

Children

Accepts children (default slot / children / { children... } / trusted HTML string in Twig, Latte, Jinja2 — see runtimes). Void tags selected via tag render no children.

ARIA

  • Computed/forwarded: aria-label (omitted when empty).
  • Typed ARIA props: aria-label — static values only.

Classes escape hatch

Compose the part's classes without rendering it (custom root element, no asChild outside React):

Runtime Helper
React / Solid / Vue / Svelte / WC progressClasses({ ... }) from progress/progress.shared.ts
templ progress.ProgressClasses(progress.ProgressProps{...})
Twig ui8kit_classes('progressClasses', { class: '…' })
Latte \UI8Kit\Latte\Classes::progressClasses(['class' => '…'])
Jinja2 progress_classes(p)

Rendered DOM per state

Canonical renderer output (children = Content); all 9 runtimes are parity-tested to produce this DOM.

State Props HTML
defaults — <progress>Content</progress>
value {"Value":"30","Max":"100","AriaLabel":"Upload"} <progress value="30" max="100" aria-label="Upload">Content</progress>

Usage

Fixture value ({"Value":"30","Max":"100","AriaLabel":"Upload"}) — every snippet renders:

<progress value="30" max="100" aria-label="Upload">Content</progress>

React (runtime notes)

import { Progress } from "./ui/progress/progress";

<Progress value="30" max="100" aria-label="Upload">Content</Progress>

Vue 3 (runtime notes)

<script setup lang="ts">
import Progress from "./ui/progress/Progress.vue";
</script>

<template>
  <Progress value="30" max="100" aria-label="Upload">Content</Progress>
</template>

Svelte 5 (runtime notes)

<script lang="ts">
  import Progress from "./ui/progress/Progress.svelte";
</script>

<Progress value="30" max="100" aria-label="Upload">Content</Progress>

SolidJS (runtime notes)

import { Progress } from "./ui/progress/progress.solid";

<Progress value="30" max="100" aria-label="Upload">Content</Progress>

Web Components (runtime notes)

import { renderProgress } from "./ui/progress/progress.wc";

document.body.append(renderProgress({ value: "30", max: "100", "aria-label": "Upload" }, "Content"));

Go templ (runtime notes)

import "github.com/ui8kit/codegen/generated/templ/ui/progress"

@progress.Progress(progress.ProgressProps{Value: new("30"), Max: "100", AriaLabel: "Upload"}) {
	Content
}

Twig (runtime notes)

{% include 'progress/Progress.html.twig' with { value: '30', max: '100', ariaLabel: 'Upload', children: 'Content' } only %}

Latte (runtime notes)

{include 'progress/Progress.latte', value: '30', max: '100', ariaLabel: 'Upload', children: 'Content'}

Jinja2 (runtime notes)

{% with p = {'Value': '30', 'Max': '100', 'AriaLabel': 'Upload'}, children = 'Content' %}{% include 'ui/progress/progress.html.j2' %}{% endwith %}

Rules: contract · Index: docs