mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 12:05:08 +00:00
(docs) Updated docs
This commit is contained in:
parent
ee1caef303
commit
3395e7f0bc
|
@ -44,7 +44,7 @@
|
||||||
<strong>mat-drawer</strong>.
|
<strong>mat-drawer</strong>.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
Since fuse-drawer works with <em>absolute</em> positioning by default, the parent of the drawer must have
|
Since fuse-drawer works with <em>absolute</em> positioning by default, the parent of the drawer must have
|
||||||
<code>position: relative</code> and <code>overflow-x: hidden</code> properties otherwise the drawer won't be able to work correctly.
|
<code>position: relative</code> and <code>overflow-x: hidden</code> properties otherwise the drawer won't be able to work correctly.
|
||||||
|
|
|
@ -55,7 +55,7 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
fuse-navigation designed to work with data and it must be supplied in certain format. If you want to create a navigation from an HTML structure,
|
fuse-navigation designed to work with data and it must be supplied in certain format. If you want to create a navigation from an HTML structure,
|
||||||
this component is not for you.
|
this component is not for you.
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
<li>If you need to present your idea to your client or to your boss without spending many hours and resources</li>
|
<li>If you need to present your idea to your client or to your boss without spending many hours and resources</li>
|
||||||
</ul>
|
</ul>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'warning'">
|
[type]="'warning'">
|
||||||
MockAPI is NOT a database or a backend replacement! It works on memory. As soon as you reload your app, all the changes you have made using Mock
|
MockAPI is NOT a database or a backend replacement! It works on memory. As soon as you reload your app, all the changes you have made using Mock
|
||||||
API endpoints will go away and replaced with defaults.
|
API endpoints will go away and replaced with defaults.
|
||||||
|
@ -200,7 +200,7 @@
|
||||||
mechanic, you will be able to mock API endpoints in no time.
|
mechanic, you will be able to mock API endpoints in no time.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
Please keep in mind that the following step-by-step guide assumes you are doing everything from scratch for the <em>MockAPI</em> like creating directories, adding
|
Please keep in mind that the following step-by-step guide assumes you are doing everything from scratch for the <em>MockAPI</em> like creating directories, adding
|
||||||
files, exporting via barrels etc. Majority of these already setup in both Demo and Starter apps for you so it's a bit easier to start working with the
|
files, exporting via barrels etc. Majority of these already setup in both Demo and Starter apps for you so it's a bit easier to start working with the
|
||||||
|
@ -213,7 +213,7 @@
|
||||||
For this guide, we will assume you are going to use the default directory.
|
For this guide, we will assume you are going to use the default directory.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
It's important to keep all mock related files in the same directory because we will create a barrel file that exports all the mock classes and provide that to the
|
It's important to keep all mock related files in the same directory because we will create a barrel file that exports all the mock classes and provide that to the
|
||||||
<code>FuseMockApiModule</code> so it can register and use them.
|
<code>FuseMockApiModule</code> so it can register and use them.
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
page.
|
page.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
Please note, you cannot run Angular components in here. Basically, by the time you can run Angular components, you won't be needing the
|
Please note, you cannot run Angular components in here. Basically, by the time you can run Angular components, you won't be needing the
|
||||||
splash screen because everything would already be loaded!
|
splash screen because everything would already be loaded!
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
made configuration service to store, write and read application wide configurations.
|
made configuration service to store, write and read application wide configurations.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
More detailed information about <code>FuseConfigService</code> can be found in the
|
More detailed information about <code>FuseConfigService</code> can be found in the
|
||||||
<a [routerLink]="['../../../core-features/services/config']">Core features > Services >
|
<a [routerLink]="['../../../core-features/services/config']">Core features > Services >
|
||||||
|
|
|
@ -141,7 +141,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
<div class="prose prose-sm max-w-none text-current">
|
<div class="prose prose-sm max-w-none text-current">
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||||
|
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
<span>
|
<span>
|
||||||
Fuse uses route based component loading strategy. There are componentless and empty-path routes specifically structured to load components without hard
|
Fuse uses route based component loading strategy. There are componentless and empty-path routes specifically structured to load components without hard
|
||||||
|
|
|
@ -48,24 +48,26 @@
|
||||||
<textarea
|
<textarea
|
||||||
fuse-highlight
|
fuse-highlight
|
||||||
lang="bash">
|
lang="bash">
|
||||||
ng build --prod
|
ng build
|
||||||
</textarea>
|
</textarea>
|
||||||
|
|
||||||
<h2>Alternate command</h2>
|
<h2>Alternate command</h2>
|
||||||
<textarea
|
<textarea
|
||||||
fuse-highlight
|
fuse-highlight
|
||||||
lang="bash">
|
lang="bash">
|
||||||
npm run build:prod
|
npm run build
|
||||||
</textarea>
|
</textarea>
|
||||||
<p class="mb-12">
|
<p class="mb-12">
|
||||||
Alias for <code>ng build --prod</code>.
|
Alias for <code>ng build</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<fuse-alert
|
||||||
|
[appearance]="'border'"
|
||||||
|
[type]="'info'">
|
||||||
If you are getting error messages that includes keywords like <strong>HEAP</strong>, <strong>JS stack tree</strong>,
|
If you are getting error messages that includes keywords like <strong>HEAP</strong>, <strong>JS stack tree</strong>,
|
||||||
<strong>out of memory</strong> while trying to run <code>ng build --prod</code> or <code>npm run build:prod</code> commands,
|
<strong>out of memory</strong> while trying to run <code>ng build --prod</code> or <code>npm run build:prod</code> commands,
|
||||||
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
|
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
|
||||||
</p>
|
</fuse-alert>
|
||||||
|
|
||||||
<!-- Nav -->
|
<!-- Nav -->
|
||||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||||
|
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
Fuse's directory structure might look overwhelming and intimidating at first, but following this page and giving a bit time to understand it before jumping
|
Fuse's directory structure might look overwhelming and intimidating at first, but following this page and giving a bit time to understand it before jumping
|
||||||
right into code will help immensely.
|
right into code will help immensely.
|
||||||
|
@ -198,12 +198,6 @@
|
||||||
<a [routerLink]="['../../../core-features/libraries/mock-api']">Core features > Libraries > MockAPI</a>
|
<a [routerLink]="['../../../core-features/libraries/mock-api']">Core features > Libraries > MockAPI</a>
|
||||||
section of this documentation.
|
section of this documentation.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
|
||||||
[appearance]="'outline'"
|
|
||||||
[type]="'info'">
|
|
||||||
<span class="font-medium">Starter</span>
|
|
||||||
version of Fuse doesn't include any mock-api services except for the Navigation.
|
|
||||||
</fuse-alert>
|
|
||||||
|
|
||||||
<h3>app/layout/</h3>
|
<h3>app/layout/</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
After choosing the version you want to install, unzip the .zip file of that version into your workspace directory.
|
After choosing the version you want to install, unzip the .zip file of that version into your workspace directory.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
<div class="prose prose-sm max-w-none text-current">
|
<div class="prose prose-sm max-w-none text-current">
|
||||||
<p>
|
<p>
|
||||||
|
@ -107,7 +107,7 @@
|
||||||
This command will take some time and install all the required libraries into the <strong>node_modules</strong> directory in order for you to start developing.
|
This command will take some time and install all the required libraries into the <strong>node_modules</strong> directory in order for you to start developing.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
<div class="prose prose-sm max-w-none text-current">
|
<div class="prose prose-sm max-w-none text-current">
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -38,7 +38,6 @@
|
||||||
|
|
||||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
After the installation process finishes, run the following command while still in your workspace directory:
|
After the installation process finishes, run the following command while still in your workspace directory:
|
||||||
</p>
|
</p>
|
||||||
|
@ -64,11 +63,13 @@
|
||||||
Alias for <code>ng serve --open</code>.
|
Alias for <code>ng serve --open</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<fuse-alert
|
||||||
|
[appearance]="'border'"
|
||||||
|
[type]="'info'">
|
||||||
If you are getting error messages that includes keywords like <strong>HEAP</strong>, <strong>JS stack tree</strong>,
|
If you are getting error messages that includes keywords like <strong>HEAP</strong>, <strong>JS stack tree</strong>,
|
||||||
<strong>out of memory</strong> while trying to run <code>ng serve --open</code> or <code>npm start</code> commands,
|
<strong>out of memory</strong> while trying to run <code>ng serve --open</code> or <code>npm start</code> commands,
|
||||||
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
|
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
|
||||||
</p>
|
</fuse-alert>
|
||||||
|
|
||||||
<!-- Nav -->
|
<!-- Nav -->
|
||||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||||
|
|
|
@ -43,14 +43,14 @@
|
||||||
therefore they are located in the <code>src/app/layout/common/</code> directory. You can modify them without touching the <code>@fuse</code> directory.
|
therefore they are located in the <code>src/app/layout/common/</code> directory. You can modify them without touching the <code>@fuse</code> directory.
|
||||||
</p>
|
</p>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
These components are not very complex and they only provide some basic features. If you wish them to do more, you have to customize them, and that's exactly why
|
These components are not very complex and they only provide some basic features. If you wish them to do more, you have to customize them, and that's exactly why
|
||||||
they are not located in the <code>@fuse</code> directory like other components.
|
they are not located in the <code>@fuse</code> directory like other components.
|
||||||
</fuse-alert>
|
</fuse-alert>
|
||||||
<fuse-alert
|
<fuse-alert
|
||||||
class="mt-4"
|
class="mt-4"
|
||||||
[appearance]="'outline'"
|
[appearance]="'border'"
|
||||||
[type]="'info'">
|
[type]="'info'">
|
||||||
We may add more features and more custom components in the future if they will be beneficial for everyone. Components that are too specific to a project won't be
|
We may add more features and more custom components in the future if they will be beneficial for everyone. Components that are too specific to a project won't be
|
||||||
included as custom components into Fuse!
|
included as custom components into Fuse!
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||||
import { FuseHighlightModule } from '@fuse/components/highlight';
|
import { FuseHighlightModule } from '@fuse/components/highlight';
|
||||||
|
@ -36,6 +37,7 @@ import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/o
|
||||||
],
|
],
|
||||||
imports : [
|
imports : [
|
||||||
RouterModule.forChild(otherComponentsRoutes),
|
RouterModule.forChild(otherComponentsRoutes),
|
||||||
|
MatButtonModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatSidenavModule,
|
MatSidenavModule,
|
||||||
FuseHighlightModule,
|
FuseHighlightModule,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user