Skip to content

Notch - Angular

Installation

npm install @fluix-ui/angular @fluix-ui/core @fluix-ui/css

Basic Usage

import { Component } from "@angular/core";
import { FluixNotchComponent } from "@fluix-ui/angular";
import "@fluix-ui/css";

@Component({
  standalone: true,
  imports: [FluixNotchComponent],
  template: `
    <fluix-notch trigger="click" position="top-center" theme="dark">
      <span notch-pill>+</span>
      <div notch-content>Quick actions</div>
    </fluix-notch>
  `,
})
export class AppComponent {}

Inputs / Outputs

Name	Type	Description
`trigger`	`NotchTrigger`	Open behavior
`position`	`NotchPosition`	Screen anchor
`spring`	`SpringConfig`	Physics config
`dotSize`	`number`	Collapsed pill size
`roundness`	`number`	Corner smoothing
`theme`	`NotchTheme`	Visual theme
`fill`	`string`	Background fill color
`open`	`boolean`	Controlled open state
`openChange`	`EventEmitter<boolean>`	Open/close event

Content Projection

[notch-pill]: collapsed content
[notch-content]: expanded content

See Also

Notch Overview - Cross-framework overview
Theming - Theme variables and custom themes
Architecture - Shared core and adapters