Overlay

Overlay

Example:

export const App = component$(() => {
  return (
    <div>
      <Overlay open={true} color="primary" opacity={0.7}>
        <div style={{ margin: 'auto', color: 'white' }}>
          This is an overlay.
        </div>
      </Overlay>
      <Button>
        <div>This content overlays.</div>
      </Button>
    </div>
  )
});

Property	Type	Description
open	boolean	Determines if the overlay is visible. (default: false)
color	'success' | 'error' | 'warning' | 'accent' | 'primary'	Color variant of the overlay background. (default: 'primary')
opacity	number	Opacity level of the overlay background. (default: 0.5)
closeOnClick	boolean	Determines if the overlay should close when clicked. (default: true)
class	string	Custom CSS class for the overlay container. (default: undefined)
style	CSSProperties	Inline styles for the overlay container. (default: { height: '100%', width: '100%', position: 'fixed', display: 'flex', inset: 0, zIndex: 99999 })

Source Code:

Component:

export interface OverlayProps {
  open?: boolean
  color?: 'success' | 'error' | 'warning' | 'accent' | 'primary'
  opacity?: number
  closeOnClick?: boolean
  class?: string
  style?: CSSProperties
}
export const Overlay = component$<OverlayProps>(
  ({
    class: className,
    style = {
      height: '100%',
      width: '100%',
      position: 'fixed',
      display: 'flex',
      inset: 0,
      zIndex: 99999,
    },
    open = false,
    color = 'primary',
    opacity = 0.5,
    closeOnClick = true,
  }) => {
    const isOpen = useSignal(false)

    return (
      <div
        class={className}
        style={isOpen.value != open ? style : { width: 0, height: 0 }}
        onClick$={$(() => closeOnClick && (isOpen.value = !isOpen.value))}
      >
        {isOpen.value != open && (
          <div
            class={`cc-overlay cc-overlay-${color}`}
            style={{ opacity: opacity }}
          />
        )}
        {isOpen.value != open && <Slot />}
      </div>
    )
  }
);

Styles:

.cc-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cc-overlay-primary {
  background-color: var(--primary-0);
}

.cc-overlay-success {
  background-color: var(--success-0);
}

.cc-overlay-error {
  background-color: var(--error-0);
}

.cc-overlay-warning {
  background-color: var(--warning-0);
}

.cc-overlay-accent {
  background-color: var(--accent-0);
}