Box

A generic box that can be used to leverage existing surface/foreground colors.

RC 0.7Kb

A generic box

import 'pyro/box'

Preview Code Stackblitz

I'm just a box

Usage

<pyro-box variant="surface" style="width: 50%">I'm just a box</pyro-box>

Variations

Boxes only have a variant (surface, foreground, transparent) that will set a background color.

Props

interface BoxProps {
  /** Background color of the box */
  variant?: 'foreground' | 'surface' | 'transparent' | '';
  /** Contents */
  children?: any;
}

Slots

/**
 * @slot - Contents of the box
 */

CSS prop theming

Allows only for customization of the backgroud color.

Full theming sheet

/**
 * @prop {--pyro-box-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-box-background = --pyro-surface-color} - `background`
 * @prop {--pyro-box-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-box-foreground-color = --pyro-foreground-color} - `background`
 */