A persistent workspace with project navigation, a current-file editor, preview and supporting tools. Compose cem-tree, cem-tabs and cem-media-preview inside its named regions.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=label | Authoring workspace}{slice @name=ariaLabel | Authoring workspace}{slice @name=class | cem-theme-native}{slice @name=dir | ltr}{slice @name=hidden | false}{slice @name=fit | content}{slice @name=layout | workbench}{slice @name=appearance | surface}
{slice @name=navigation | Project explorer}{slice @name=editor | Current file editor}{slice @name=preview | Preview}{slice @name=tools | Commands and diagnostics}
{cem-select @label=layout @value={datadom.slices.layout} @slice=layout @slice-event=change @slice-value="$target.value" | {span @slot=label | layout}{option @value=workbench | Workbench}{option @value=browser | Browser}{option @value=project | Project}}
{cem-select @label=appearance @value={datadom.slices.appearance} @slice=appearance @slice-event=change @slice-value="$target.value" | {span @slot=label | appearance}{option @value=surface | Surface}{option @value=flush | Flush}}
{cem-field @label=label @value={datadom.slices.label} @slice=label @slice-event=input @slice-value="$target.value"}
{cem-field @label=navigation-label @value={datadom.slices.navigation} @slice=navigation @slice-event=input @slice-value="$target.value"}
{cem-field @label=editor-label @value={datadom.slices.editor} @slice=editor @slice-event=input @slice-value="$target.value"}
{cem-field @label=preview-label @value={datadom.slices.preview} @slice=preview @slice-event=input @slice-value="$target.value"}
{cem-field @label=tools-label @value={datadom.slices.tools} @slice=tools @slice-event=input @slice-value="$target.value"}
{cem-field @label=aria-label @value={datadom.slices.ariaLabel} @slice=ariaLabel @slice-event=input @slice-value="$target.value"}
{cem-field @label=class @value={datadom.slices.class} @slice=class @slice-event=input @slice-value="$target.value"}
{cem-select @name=dir @slice=dir @slice-event=change @slice-value="$target.value" @value={datadom.slices.dir} | {span @slot=label | dir}{option @value=ltr | ltr}{option @value=rtl | rtl}}
{cem-checkbox @label=hidden @checked={if datadom.slices.hidden {true} else {null}} @slice=hidden @slice-event=change @slice-value="$target.checked"}
{cem-select @name=fit @slice=fit @slice-event=change @slice-value="$target.value" @value={datadom.slices.fit} |
{span @slot=label | fit}{option @value=content | Content}{option @value=fill | Fill}
}
{div @style="block-size:70vb" |
{cem-workspace @appearance={datadom.slices.appearance} @layout={datadom.slices.layout} @aria-label={datadom.slices.ariaLabel} @class={datadom.slices.class} @dir={datadom.slices.dir} @hidden={if datadom.slices.hidden { true } else { null }} @label={datadom.slices.label} @fit={datadom.slices.fit} @navigation-label={datadom.slices.navigation} @editor-label={datadom.slices.editor} @preview-label={datadom.slices.preview} @tools-label={datadom.slices.tools} |
{nav @slot=navigation | Project / templates / view.cemt}
{label @slot=editor | Current file {textarea @rows=8 | Original source}}
{article @slot=preview | Rendered output}
{section @slot=tools | Command configuration and diagnostics}
}
}
{cem-module-url @slice=source @src="@epa-wg/cem-components/components/cem-workspace/cem-workspace.xhtml"}{cem:if @test=datadom.slices.source | {cem-demo-element @legend="Canonical source" @src={datadom.slices.source} @type=xml @demo=false}}