List

List renders ul, ol, dl, or menu containers.

github.com/fastygo/templ/ui

Summary

List renders ul, ol, dl, or menu containers.ListItem renders one li row inside List.

Use Cases

Show bullet navigation links

Show ordered steps in a wizard

Semantics

ResolveTag uses TagGroupList from utils

ListItem Value sets li value attribute when positive

Example tag.ul

First item
Second item

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.List(ui.ListProps{Class: "gap-2"}) {
		@ui.ListItem(ui.ListItemProps{}) { First item }
		@ui.ListItem(ui.ListItemProps{}) { Second item }
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.List(ui.ListProps{Class: "gap-2"}) {
		@ui.ListItem(ui.ListItemProps{}) { First item }
		@ui.ListItem(ui.ListItemProps{}) { Second item }
	}
}

Example tag.ol

Step one
Step two

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.List(ui.ListProps{Tag: "ol", Class: "list-decimal pl-4 gap-2"}) {
		@ui.ListItem(ui.ListItemProps{Value: 1}) { Step one }
		@ui.ListItem(ui.ListItemProps{Value: 2}) { Step two }
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.List(ui.ListProps{Tag: "ol", Class: "list-decimal pl-4 gap-2"}) {
		@ui.ListItem(ui.ListItemProps{Value: 1}) { Step one }
		@ui.ListItem(ui.ListItemProps{Value: 2}) { Step two }
	}
}

API

ItemTag · string — role: item-tag; enum: li|dt|dd; default: li; source: utils.tags.TagGroupListItem

Tag · string — role: list-tag; enum: ul|ol|dl|menu; default: ul; source: utils.tags.TagGroupList

Value · int — role: ordered-value