mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-12 03:21:37 +00:00
489 lines
17 KiB
HTML
489 lines
17 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">Components</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">
|
|
Loading Bar
|
|
</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>fuse-loading-bar</strong> is a small component to show the loading status at the top of the page. It can be configured to the
|
|
<strong>Auto Mode</strong> to show/hide automatically on each HTTP request. It can also be toggled manually using its service.
|
|
</p>
|
|
<p>
|
|
<strong>Exported as: </strong><code>fuseLoadingBar</code>
|
|
</p>
|
|
|
|
<h2>Module</h2>
|
|
<textarea
|
|
fuse-highlight
|
|
lang="typescript">
|
|
import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
|
|
</textarea>
|
|
|
|
<h2>Usage</h2>
|
|
<p>
|
|
Here's the basic usage of the <code>fuse-loading-bar</code>. We already placed the component to the
|
|
layout templates for you but you can always move it!
|
|
</p>
|
|
<!-- @formatter:off -->
|
|
<textarea fuse-highlight
|
|
lang="html">
|
|
<fuse-loading-bar></fuse-loading-bar>
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
<h2>Properties</h2>
|
|
<div class="bg-card py-3 px-6 rounded shadow">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Description</th>
|
|
<th>Default</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="font-mono text-md text-secondary">
|
|
<div>@Input()</div>
|
|
<div>autoMode: boolean</div>
|
|
</td>
|
|
<td>
|
|
Turn on or off the Auto Mode.
|
|
</td>
|
|
<td>
|
|
<code>true</code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Service</h2>
|
|
<p>
|
|
<code>FuseLoadingService</code> can be injected to control the loading bar from anywhere.
|
|
</p>
|
|
<div class="bg-card rounded shadow mt-4">
|
|
<div class="px-6 py-3 font-mono text-secondary border-b">
|
|
show(): void;
|
|
</div>
|
|
<div class="p-6">
|
|
Shows the loading bar
|
|
</div>
|
|
</div>
|
|
<div class="bg-card rounded shadow mt-4">
|
|
<div class="px-6 py-3 font-mono text-secondary border-b">
|
|
hide(): void;
|
|
</div>
|
|
<div class="p-6">
|
|
Hides the loading bar
|
|
</div>
|
|
</div>
|
|
<div class="bg-card rounded shadow mt-4">
|
|
<div class="px-6 py-3 font-mono text-secondary border-b">
|
|
setAutoMode(value: boolean): void;
|
|
</div>
|
|
<div class="p-6">
|
|
Sets the Auto Mode. In Auto mode, loading bar will show when there is an HTTP request and it will
|
|
hide when all HTTP requests are completed or failed.
|
|
</div>
|
|
</div>
|
|
<div class="bg-card rounded shadow mt-4">
|
|
<div class="px-6 py-3 font-mono text-secondary border-b">
|
|
setMode(value: 'determinate' | 'indeterminate'): void;
|
|
</div>
|
|
<div class="p-6">
|
|
Sets the mode of the underlying <code>MatProgressBar</code> component.
|
|
</div>
|
|
</div>
|
|
<div class="bg-card rounded shadow mt-4">
|
|
<div class="px-6 py-3 font-mono text-secondary border-b">
|
|
setProgress(value: number): void;
|
|
</div>
|
|
<div class="p-6">
|
|
Sets the progress manually. Only available on <code>determinate</code> mode.
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Examples</h2>
|
|
<div class="example-viewer">
|
|
|
|
<div class="title">
|
|
<h6>Show / hide the loading bar manually</h6>
|
|
</div>
|
|
|
|
<mat-tab-group [animationDuration]="'0ms'">
|
|
|
|
<mat-tab label="Preview">
|
|
|
|
<ng-template matTabContent>
|
|
|
|
<div class="bg-gray-100 p-4">
|
|
<div class="flex mx-auto max-w-80 space-x-4">
|
|
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="showLoadingBar()">
|
|
Show loading bar
|
|
</button>
|
|
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="hideLoadingBar()">
|
|
Hide loading bar
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="HTML">
|
|
|
|
<!-- @formatter:off -->
|
|
<textarea
|
|
fuse-highlight
|
|
[lang]="'html'">
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="showLoadingBar()">
|
|
Show loading bar
|
|
</button>
|
|
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="hideLoadingBar()">
|
|
Hide loading bar
|
|
</button>
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Typescript">
|
|
|
|
<!-- @formatter:off -->
|
|
<textarea
|
|
fuse-highlight
|
|
[lang]="'ts'">
|
|
/**
|
|
* Constructor
|
|
*/
|
|
constructor( private _fuseLoadingService: FuseLoadingService ) { }
|
|
|
|
...
|
|
|
|
/**
|
|
* Show the loading bar
|
|
*/
|
|
showLoadingBar(): void
|
|
{
|
|
this._fuseLoadingService.show();
|
|
}
|
|
|
|
/**
|
|
* Hide the loading bar
|
|
*/
|
|
hideLoadingBar(): void
|
|
{
|
|
this._fuseLoadingService.hide();
|
|
}
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</mat-tab>
|
|
|
|
</mat-tab-group>
|
|
|
|
</div>
|
|
|
|
<div class="example-viewer">
|
|
|
|
<div class="title">
|
|
<h6>Toggle the Auto Mode</h6>
|
|
</div>
|
|
|
|
<mat-tab-group [animationDuration]="'0ms'">
|
|
|
|
<mat-tab label="Preview">
|
|
|
|
<ng-template matTabContent>
|
|
|
|
<div class="bg-gray-100 p-4">
|
|
<div class="flex flex-col items-center mx-auto max-w-80">
|
|
|
|
<mat-slide-toggle
|
|
[checked]="true"
|
|
[color]="'primary'"
|
|
(change)="setAutoMode($event)">
|
|
Auto Mode
|
|
</mat-slide-toggle>
|
|
|
|
<div class="w-24 pt-6 mb-6 border-b"></div>
|
|
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="makeAPICall()">
|
|
Make an API call (2000ms delay)
|
|
</button>
|
|
|
|
<div class="mt-2">API call status: {{apiCallStatus}}</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="HTML">
|
|
|
|
<!-- @formatter:off -->
|
|
<textarea
|
|
fuse-highlight
|
|
[lang]="'html'">
|
|
<mat-slide-toggle
|
|
[checked]="true"
|
|
[color]="'primary'"
|
|
(change)="setAutoMode($event)">
|
|
Auto Mode
|
|
</mat-slide-toggle>
|
|
|
|
<div class="w-24 pt-6 mb-6 border-b"></div>
|
|
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="makeAPICall()">
|
|
Make an API call (2000ms delay)
|
|
</button>
|
|
|
|
<div class="mt-2">API call status: {{apiCallStatus}}</div>
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Typescript">
|
|
|
|
<!-- @formatter:off -->
|
|
<textarea
|
|
fuse-highlight
|
|
[lang]="'ts'">
|
|
apiCallStatus: string = '-';
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
constructor(
|
|
private _httpClient: HttpClient,
|
|
private _fuseLoadingService: FuseLoadingService
|
|
)
|
|
{ }
|
|
|
|
...
|
|
|
|
/**
|
|
* Set the auto mode
|
|
*
|
|
* @param change
|
|
*/
|
|
setAutoMode(change: MatSlideToggleChange): void
|
|
{
|
|
this._fuseLoadingService.setAutoMode(change.checked);
|
|
}
|
|
|
|
/**
|
|
* Make a fake API call
|
|
*/
|
|
makeAPICall(): void
|
|
{
|
|
this.apiCallStatus = 'Waiting...';
|
|
|
|
this._httpClient.get('https://jsonplaceholder.typicode.com/posts?_delay=2000')
|
|
.pipe(finalize(() => { this.apiCallStatus = 'Finished!'; }))
|
|
.subscribe((response) => {
|
|
console.log(response);
|
|
});
|
|
}
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</mat-tab>
|
|
|
|
</mat-tab-group>
|
|
|
|
</div>
|
|
|
|
<div class="example-viewer">
|
|
|
|
<div class="title">
|
|
<h6>Manually set the progress</h6>
|
|
</div>
|
|
|
|
<mat-tab-group [animationDuration]="'0ms'">
|
|
|
|
<mat-tab label="Preview">
|
|
|
|
<ng-template matTabContent>
|
|
|
|
<div class="bg-gray-100 p-4">
|
|
<div class="flex flex-col items-center mx-auto max-w-80 space-y-8">
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="showLoadingBar()">
|
|
Show loading bar
|
|
</button>
|
|
|
|
<button
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="hideLoadingBar()">
|
|
Hide loading bar
|
|
</button>
|
|
</div>
|
|
|
|
<mat-slide-toggle
|
|
[checked]="false"
|
|
[color]="'primary'"
|
|
(change)="toggleMode()">
|
|
Toggle determinate mode
|
|
</mat-slide-toggle>
|
|
|
|
<div>
|
|
Progress value
|
|
<mat-slider [color]="'primary'">
|
|
<input
|
|
matSliderThumb
|
|
[(value)]="sliderValue"
|
|
(valueChange)="setProgress()">
|
|
</mat-slider>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="HTML">
|
|
|
|
<!-- @formatter:off -->
|
|
<textarea
|
|
fuse-highlight
|
|
[lang]="'html'">
|
|
<mat-slide-toggle
|
|
[checked]="false"
|
|
[color]="'primary'"
|
|
(change)="toggleMode()">
|
|
Toggle determinate mode
|
|
</mat-slide-toggle>
|
|
|
|
<mat-slider
|
|
[color]="'primary'"
|
|
(change)="setProgress($event)">
|
|
Progress value
|
|
</mat-slider>
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</mat-tab>
|
|
|
|
<mat-tab label="Typescript">
|
|
|
|
<!-- @formatter:off -->
|
|
<textarea
|
|
fuse-highlight
|
|
[lang]="'ts'">
|
|
mode: 'determinate' | 'indeterminate' = 'indeterminate';
|
|
|
|
/**
|
|
* Constructor
|
|
*/
|
|
constructor( private _fuseLoadingService: FuseLoadingService ) { }
|
|
|
|
...
|
|
|
|
/**
|
|
* Toggle the mode
|
|
*/
|
|
toggleMode(): void
|
|
{
|
|
// Show the loading bar
|
|
this._fuseLoadingService.show();
|
|
|
|
// Turn off the auto mode
|
|
this._fuseLoadingService.setAutoMode(false);
|
|
|
|
// Set the mode
|
|
this.mode = this.mode === 'indeterminate' ? 'determinate' : 'indeterminate';
|
|
this._fuseLoadingService.setMode(this.mode);
|
|
}
|
|
|
|
/**
|
|
* Set the progress
|
|
*
|
|
* @param change
|
|
*/
|
|
setProgress(change: MatSliderChange): void
|
|
{
|
|
this._fuseLoadingService.setProgress(change.value);
|
|
}
|
|
</textarea>
|
|
<!-- @formatter:on -->
|
|
|
|
</mat-tab>
|
|
|
|
</mat-tab-group>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|