Group.Group

Import

import { Group } from "@typed/ui/index";

Access Group.Group through the imported Group export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function Group<const Options extends GroupOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, GroupInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Examples

import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { Button } from "@typed/ui/Button";
import { component } from "@typed/template";
import * as Group from "@typed/ui/Group";

export const PreviewActions = component(function* () {
  const rotation = yield* RefSubject.make(45);
  const scale = yield* RefSubject.make(150);
  return html`<section>
    <p>Rotation: ${rotation} degrees. Scale: ${scale}%.</p>
    ${Group.Label({
      content: "Preview controls",
      props: { id: "preview-control-label", class: "control-group-label" },
    })}
    ${Group.Group({
      labelledBy: "preview-control-label",
      props: { class: "preview-actions" },
      content: [
        Button({ content: "Reset rotation", onclick: RefSubject.set(rotation, 0) }),
        Button({ content: "Reset scale", onclick: RefSubject.set(scale, 100) }),
      ],
    })}
  </section>`;
});

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

• Group.Group from @typed/ui
• Group from @typed/ui/Group

Source

• packages/ui/src/Group.ts:97