DuskMoon workflow duskmoon implemented 7 demos

DmTabs

DmTabs documents the DmTabs export from duskmoon.

Import @duskmoon-dev/components/dm-tabs

2 API sections

5 documented props

5 behavior scenarios

Key API

itemstransparentCardoptionTreedestroyOnHiddenpath

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmTabs is most often configured through `items`, `transparentCard`, `optionTree`, `destroyOnHidden`.

Covered behavior

Renders line workflow tabs with Dm shell and class names

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmTabs from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTabs } from "@duskmoon-dev/components/dm-tabs";

export function Example() {
  return (<DmTabs
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>);
}

Preview

Renders line workflow tabs with Dm shell and class names

test-backed

DmTabs scenario from the component test coverage: renders line workflow tabs with dm shell and class names.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTabs } from "@duskmoon-dev/components/dm-tabs";

export function DmTabsRendersLineWorkflowTabsDemo() {
  return (<DmTabs
  // Renders line workflow tabs with Dm shell and class names
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>);
}

Preview

Uses vertical line class for side tab positions

test-backed

DmTabs scenario from the component test coverage: uses vertical line class for side tab positions.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTabs } from "@duskmoon-dev/components/dm-tabs";

export function DmTabsUsesVerticalLineClassDemo() {
  return (<DmTabs
  // Uses vertical line class for side tab positions
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>);
}

Preview

Supports transparent card and option tree workflow variants

test-backed

DmTabs scenario from the component test coverage: supports transparent card and option tree workflow variants.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTabs } from "@duskmoon-dev/components/dm-tabs";

export function DmTabsSupportsTransparentCardAndDemo() {
  return (<DmTabs
  // Supports transparent card and option tree workflow variants
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>);
}

Preview

Maps destroyOnHidden to primitive inactive pane destruction

test-backed

DmTabs scenario from the component test coverage: maps destroyonhidden to primitive inactive pane destruction.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTabs } from "@duskmoon-dev/components/dm-tabs";

export function DmTabsMapsDestroyOnHiddenToPrimitiveDemo() {
  return (<DmTabs
  // Maps destroyOnHidden to primitive inactive pane destruction
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>);
}

Preview

Keeps primitive onChange behavior and forwards root ref

test-backed

DmTabs scenario from the component test coverage: keeps primitive onchange behavior and forwards root ref.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTabs } from "@duskmoon-dev/components/dm-tabs";

export function DmTabsKeepsPrimitiveOnChangeBehaviorDemo() {
  return (<DmTabs
  // Keeps primitive onChange behavior and forwards root ref
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmTabs
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>
</div>

<div data-theme="moonlight">
  <DmTabs
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Tabs
</DmTabs>
</div>

API

The API reference below lists every parsed exported type or interface for DmTabs. Start with `items`, `transparentCard`, `optionTree`, `destroyOnHidden` for common usage.

Types: packages/components/src/components/dm-tabs/DmTabs.types.ts Scenarios: packages/components/src/components/dm-tabs/DmTabs.test.tsx

DmTabsProps interface extends Omit<TabsProps, "items">

Prop	Type	Required	Description
`items`	`DmTabsItem[]`	Yes	items configures DmTabs.
`transparentCard`	`boolean`	No	transparentCard configures DmTabs.
`optionTree`	`boolean`	No	optionTree configures DmTabs.
`destroyOnHidden`	`boolean`	No	destroyOnHidden configures DmTabs.

DmTabsItem interface extends TabsItem

Prop	Type	Required	Description
`path`	`string`	No	path configures DmTabs.