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

Files

Lorenz Hilpert 7e7a5ebab9 Introduced responsive layout utilities and directives for Angular.

- ✨ **Feature**: Added breakpoint utility for responsive design
- ✨ **Feature**: Implemented BreakpointDirective for conditional rendering
- 🛠️ **Refactor**: Updated styles for filter and order-by components
- 📚 **Docs**: Created README and documentation for ui-layout library
- ⚙️ **Config**: Added TypeScript and ESLint configurations for the new library

2025-04-04 18:00:49 +02:00

1.5 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>

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.5 KiB Raw Blame History