Class UISurface

Host directive that maps a surfaceType input to a CSS class on the host element: ui-surface-type-<value>.

Applied automatically to every ui-* component via hostDirectives. The actual visual treatment is defined in the theme stylesheet — the directive only manages the class binding.

Built-in types

Custom types

Define a CSS class with the ui-surface-type- prefix in your stylesheet:

.ui-surface-type-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}
Copy

Then use it on any component:

<ui-card surfaceType="glass">…</ui-card>
Copy

Multiple types

Pass a space-separated string or an array to combine surface types:

<ui-card surfaceType="raised glass">…</ui-card>
<ui-card [surfaceType]="['raised', 'glass']">…</ui-card>
Copy