mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00

Files

Lorenz Hilpert 8ca7977f7c Enhanced return details and search components with new features and improvements.

- ✨ **Feature**: Added InViewport directive for element visibility detection
- ✨ **Feature**: Introduced new button for navigation in return details
- 🛠️ **Refactor**: Improved scroll position restoration logic and removed deprecated files
- 📚 **Docs**: Updated README with usage instructions for new directives

Ref: #5034

2025-04-08 10:51:24 +02:00

1.7 KiB

Raw Blame History

ui-layout

This library provides utilities and directives for responsive design in Angular applications.

Features

Breakpoint Utility: A function to detect viewport breakpoints using Angular's BreakpointObserver.
Breakpoint Directive: A structural directive to conditionally render templates based on viewport breakpoints.

Installation

Ensure you have Angular and its dependencies installed. Then, include this library in your Angular project.

Usage

Breakpoint Utility

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

import { breakpoint, Breakpoint } from 'ui-layout';

const isTablet = breakpoint(Breakpoint.Tablet);

Breakpoint Directive

The uiBreakpoint directive conditionally includes a template based on the viewport's breakpoint.

<ng-container *uiBreakpoint="'tablet'">
  This content is visible only on tablet viewports.
</ng-container>

InViewport Directive

Use this directive to emit an event whenever the host element enters or leaves the viewport.

<some-element uiInViewport (uiInViewport)="onInViewportChange($event)"> ... </some-element>

Breakpoints Table

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

Running Unit Tests

Run nx test ui-layout to execute the unit tests.

1.7 KiB Raw Blame History