import { Meta } from '@storybook/addon-docs';

<Meta title="UI/Layout/Breakpoint" />

# Breakpoint Utility

The `breakpoint` utility allows you to create a Signal that evaluates to `true` if the current viewport matches the specified breakpoints.

## Usage

### Example

```typescript
import { Component } from '@angular/core';
import { breakpoint, Breakpoint } from 'ui-layout';

@Component({
  selector: 'app-breakpoint-demo',
  template: `
    <div *uiBreakpoint="'tablet'">This content is visible only on tablet viewports.</div>
  `,
  imports: [BreakpointDirective],
})
export class BreakpointDemoComponent {
  isTablet = breakpoint(Breakpoint.Tablet);
}
```

### Breakpoints Table

| Breakpoint   | CSS Media Query Selector                      |
| ------------ | --------------------------------------------- |
| `tablet`     | `(max-width: 1279px)`                         |
| `desktop`    | `(min-width: 1280px) and (max-width: 1439px)` |
| `desktop-l`  | `(min-width: 1440px) and (max-width: 1919px)` |
| `desktop-xl` | `(min-width: 1920px)`                         |
