Recursive hierarchy data consumed by cem-tree, which owns treeitem buttons, expansion and selection.
Full examples and variation matrix · Property playground · Automated stories
Default slot contains nested cem-tree-item children. The consuming tree owns presentation. Attribute presence enables boolean options, including the text “false”. Inert payload options take effect in the consuming component shown in the gallery. Native descendants retain keyboard behavior.
{slice @name=value | one}{cem-field @label="value" @value="{$datadom.slices.value}" @slice=value @slice-event=input @slice-value="$target.value"}
{slice @name=icon | ◇}{cem-field @label=icon @value={datadom.slices.icon} @slice=icon @slice-event=input @slice-value="$target.value"}{slice @name=kind | project}{cem-field @label=kind @value={datadom.slices.kind} @slice=kind @slice-event=input @slice-value="$target.value"}
{slice @name=label | One}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=expandable | absent}{fieldset @role=group @aria-label="expandable" @slice=expandable @slice-event=change @slice-value="$target.value" | {legend | expandable}{cem-radio @name="property-expandable" @value="absent" @label="absent" @checked={if datadom.slices.expandable == "absent" {true} else {null}}}{cem-radio @name="property-expandable" @value="present" @label="present" @checked={if datadom.slices.expandable == "present" {true} else {null}}}}
{slice @name=disabled | absent}{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="property-disabled" @value="absent" @label="absent" @checked={if datadom.slices.disabled == "absent" {true} else {null}}}{cem-radio @name="property-disabled" @value="present" @label="present" @checked={if datadom.slices.disabled == "present" {true} else {null}}}}
{slice @name=loading | absent}{fieldset @role=group @aria-label="loading" @slice=loading @slice-event=change @slice-value="$target.value" | {legend | loading}{cem-radio @name="property-loading" @value="absent" @label="absent" @checked={if datadom.slices.loading == "absent" {true} else {null}}}{cem-radio @name="property-loading" @value="present" @label="present" @checked={if datadom.slices.loading == "present" {true} else {null}}}}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=hidden | absent}{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{slice @name=content | fallback}{fieldset @role=group @aria-label="content" @slice=content @slice-event=change @slice-value="$target.value" | {legend | content}{cem-radio @name="property-content" @value="fallback" @label="fallback" @checked={if datadom.slices.content == "fallback" {true} else {null}}}{cem-radio @name="property-content" @value="projected" @label="projected" @checked={if datadom.slices.content == "projected" {true} else {null}}}}
{cem-tree-item @icon={datadom.slices.icon} @kind={datadom.slices.kind} @value="{$datadom.slices.value}" @label="{$datadom.slices.label}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @expandable={if datadom.slices.expandable == "present" {true} else {null}} @disabled={if datadom.slices.disabled == "present" {true} else {null}} @loading={if datadom.slices.loading == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:if @test='datadom.slices.content == "projected"' | {cem-tree-item @value=child @label="Child node"}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-tree-item/cem-tree-item.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}