mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-24 00:53:12 +00:00
104 lines
4.0 KiB
HTML
104 lines
4.0 KiB
HTML
<div class="flex flex-col flex-auto min-w-0">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
|
<div class="flex-1 min-w-0">
|
|
<!-- Breadcrumbs -->
|
|
<div class="flex flex-wrap items-center font-medium">
|
|
<div>
|
|
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
|
</div>
|
|
<div class="flex items-center ml-1 whitespace-nowrap">
|
|
<mat-icon
|
|
class="icon-size-5 text-secondary"
|
|
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
|
<a class="ml-1 text-primary-500">Fuse Components</a>
|
|
</div>
|
|
<div class="flex items-center ml-1 whitespace-nowrap">
|
|
<mat-icon
|
|
class="icon-size-5 text-secondary"
|
|
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
|
<span class="ml-1 text-secondary">Services</span>
|
|
</div>
|
|
</div>
|
|
<!-- Title -->
|
|
<div class="mt-2">
|
|
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
|
Media Watcher
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
|
mat-icon-button
|
|
(click)="toggleDrawer()">
|
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
|
|
|
<p>
|
|
<strong>FuseMediaWatcherService</strong> is a singleton service to watch media changes. It automatically registers the breakpoints from TailwindCSS configuration, so
|
|
you can use the service without needing to configure it first.
|
|
</p>
|
|
|
|
<h2>Module</h2>
|
|
<textarea
|
|
fuse-highlight
|
|
lang="typescript">
|
|
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher';
|
|
</textarea>
|
|
|
|
<h2>Methods</h2>
|
|
<p>
|
|
To watch changes on registered breakpoints, you can use the <strong>onMediaChange$</strong> getter:
|
|
</p>
|
|
<!-- @formatter:off -->
|
|
<textarea fuse-highlight lang="typescript">
|
|
import { FuseMediaWatcherService } from '@fuse/services/config';
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
|
{
|
|
// Subscribe to media changes
|
|
this._fuseMediaWatcherService.onMediaChange$
|
|
.pipe(takeUntil(this._unsubscribeAll))
|
|
.subscribe(({matchingAliases}) => {
|
|
|
|
// Check if the breakpoint is 'md' and up
|
|
this.isScreenSmall = matchingAliases.includes('md');
|
|
});
|
|
}
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
<p>
|
|
You can also listen for custom media queries using <code>onMediaQueryChange$(query: string)</code> method:
|
|
</p>
|
|
<!-- @formatter:off -->
|
|
<textarea fuse-highlight lang="typescript">
|
|
import { FuseMediaWatcherService } from '@fuse/services/config';
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
|
{
|
|
// Subscribe to media changes
|
|
this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
|
|
.pipe(takeUntil(this._unsubscribeAll))
|
|
.subscribe((state) => {
|
|
|
|
// Calculate the drawer mode
|
|
this.drawerMode = state.matches ? 'side' : 'over';
|
|
});
|
|
}
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</div>
|
|
|
|
</div>
|