Breakpoints provides utilities for observing and reacting to viewport size changes.
import { NoopBreakpointObserver } from '@daffodil/design'
A no-op implementation of Angular CDK's BreakpointObserver that always reports
no breakpoints as matched. Useful for server-side rendering or testing contexts
where browser layout APIs are unavailable.
@Injectable()
class NoopBreakpointObserver implements Omit<BreakpointObserver, never> {
isMatched(value: string | readonly string[]): boolean
observe(value: string | readonly string[]): any
}
booleanAlways returns false, indicating that none of the given media queries are active.
| Parameter | value: string | readonly string[] |
|---|---|
| Description |
anyReturns an observable that never emits a BreakpointState, making breakpoint-dependent logic inert.
| Parameter | value: string | readonly string[] |
|---|---|
| Description |
import { SERVER_SAFE_BREAKPOINT_OBSERVER } from '@daffodil/design'
Provides a NoopBreakpointObserver if the platform is not browser.
const SERVER_SAFE_BREAKPOINT_OBSERVER: InjectionToken<Pick<BreakpointObserver, "ngOnDestroy" | "isMatched" | "observe">>
import { DaffBreakpoints } from '@daffodil/design'
Sensible breakpoints for layouts and interfaces used across @daffodil/design components.
enum DaffBreakpoints {
DESKTOP = DaffBreakpoints.DESKTOP,
LAPTOP = DaffBreakpoints.LAPTOP,
SMALL_LAPTOP = DaffBreakpoints.SMALL_LAPTOP,
BIG_TABLET = DaffBreakpoints.BIG_TABLET,
TABLET = DaffBreakpoints.TABLET,
MOBILE = DaffBreakpoints.MOBILE,
}
DESKTOP DaffBreakpoints.DESKTOP |
|---|
|
LAPTOP DaffBreakpoints.LAPTOP |
|---|
|
SMALL_LAPTOP DaffBreakpoints.SMALL_LAPTOP |
|---|
|
BIG_TABLET DaffBreakpoints.BIG_TABLET |
|---|
|
TABLET DaffBreakpoints.TABLET |
|---|
|
MOBILE DaffBreakpoints.MOBILE |
|---|
|