mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-19 07:17:09 +00:00
(MultiLang) Added multi language support using @ngneat/transloco
(docs) Added docs about multi language
This commit is contained in:
sercan
@@ -12,7 +12,9 @@
|
||||
src="assets/images/avatars/brian-hughes.jpg">
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0 ml-4">
|
||||
<div class="text-2xl md:text-5xl font-semibold tracking-tight leading-7 md:leading-10 truncate">Welcome back, Brian!</div>
|
||||
<ng-container *transloco="let t">
|
||||
<div class="text-2xl md:text-5xl font-semibold tracking-tight leading-7 md:leading-snug truncate">{{t('welcome-back')}}, Brian!</div>
|
||||
</ng-container>
|
||||
<div class="flex items-center">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
|
||||
@@ -10,6 +10,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { TranslocoModule } from '@ngneat/transloco';
|
||||
import { NgApexchartsModule } from 'ng-apexcharts';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { ProjectComponent } from 'app/modules/admin/dashboards/project/project.component';
|
||||
@@ -32,6 +33,7 @@ import { projectRoutes } from 'app/modules/admin/dashboards/project/project.rout
|
||||
MatTableModule,
|
||||
MatTabsModule,
|
||||
NgApexchartsModule,
|
||||
TranslocoModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
|
||||
@@ -109,23 +109,6 @@
|
||||
in Javascript.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg"
|
||||
[routerLink]="['../../customization/splash-screen']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Splash Screen</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -156,33 +156,6 @@
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../theming']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Theming</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../splash-screen']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Splash Screen</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<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">Guides</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">Customization</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">
|
||||
Multi Language
|
||||
</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>
|
||||
Fuse uses <strong>Transloco</strong> library for the multi language support.
|
||||
</p>
|
||||
|
||||
<h2>Official documentation</h2>
|
||||
<p>
|
||||
You can access the official documentation of <strong>Transloco</strong> over here: https://ngneat.github.io/transloco/docs/installation
|
||||
</p>
|
||||
<p>
|
||||
Other than the initial setup, Fuse doesn't introduce anything to <strong>Transloco</strong> or change any of its functionality. You can follow the official
|
||||
documentation to get started.
|
||||
</p>
|
||||
|
||||
<h2>Translating the navigation</h2>
|
||||
<p>
|
||||
Since <code>FuseNavigation</code> supports runtime data swapping, you can replace the navigation data either partially or completely when the language changes.
|
||||
The <strong>LanguageComponent</strong> is a suitable place to do this and it's located at <code>src/app/layout/common/language</code>.
|
||||
</p>
|
||||
|
||||
<h2>Removing Transloco</h2>
|
||||
<p>
|
||||
If you don't need multi language support in your project, you may remove the <strong>Transloco</strong> support. Here's a step by step guide to remove
|
||||
the <strong>Transloco</strong> from Fuse:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Navigate to <code>src/app/core/core.module.ts</code> file and remove imports of <code>TranslocoCoreModule</code></li>
|
||||
<li>Remove the <code>src/app/core/transloco</code> directory</li>
|
||||
<li>Do a project wide search for <code><language></language></code> and remove all instances</li>
|
||||
<li>Do a project wide search for <code>LanguageModule</code> and remove all imports</li>
|
||||
<li>Remove the <code>src/app/layout/common/language</code> directory</li>
|
||||
<li>Finally navigate to the <code>package.json</code> file, remove the <strong>"@ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component';
|
||||
|
||||
@Component({
|
||||
selector : 'multi-language',
|
||||
templateUrl: './multi-language.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class MultiLanguageCustomizationComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _guidesComponent: GuidesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._guidesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -50,33 +50,6 @@
|
||||
All page layouts can be found within the Demo app, you can try them over there and choose one that fits your needs.
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../theme-layouts']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Theme Layouts</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../tailwindcss']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">TailwindCSS</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -109,33 +109,6 @@
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../component-theming']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Component Theming</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../../authentication/jwt']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">JWT</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -85,33 +85,6 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../page-layouts']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Page Layouts</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../theming']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Theming</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -106,33 +106,6 @@
|
||||
removing the <code>LayoutComponent</code> and using the individual layouts by themselves is not possible.
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../../development/updating']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Updating</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../page-layouts']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Page Layouts</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -352,33 +352,6 @@
|
||||
schemes depending on the user's operating system's setting.
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../tailwindcss']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">TailwindCSS</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../component-theming']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Component Theming</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -148,33 +148,6 @@
|
||||
layouts include common components like <strong>Navigation</strong>, <strong>Header</strong> and <strong>Footer</strong>.
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../directory-structure']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Directory Structure</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../starter-kit']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Starter Kit</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -69,33 +69,6 @@
|
||||
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
|
||||
</fuse-alert>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../starter-kit']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Starter Kit</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../updating']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Updating</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -304,33 +304,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../../getting-started/serving']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Serving</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../component-structure']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Component Structure</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -48,33 +48,6 @@
|
||||
lot more than usual.
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../component-structure']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Component Structure</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../deployment']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Deployment</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -63,33 +63,6 @@
|
||||
setup or merge (and resolve conflicts) through Github. Every release is tagged and available under the <strong>Releases</strong> tab of Fuse's Github repo.
|
||||
</p>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../deployment']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Deployment</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../../customization/theme-layouts']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Theme Layouts</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -121,33 +121,6 @@
|
||||
</div>
|
||||
</fuse-alert>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../prerequisites']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Prerequisites</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../serving']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Serving</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -84,22 +84,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg"
|
||||
[routerLink]="['../prerequisites']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Prerequisites</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -79,33 +79,6 @@
|
||||
npm install -g @angular/cli
|
||||
</textarea>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../introduction']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Introduction</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../installation']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Installation</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -71,33 +71,6 @@
|
||||
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
|
||||
</fuse-alert>
|
||||
|
||||
<!-- Nav -->
|
||||
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
|
||||
|
||||
<!-- Prev -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
|
||||
[routerLink]="['../installation']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
<div>
|
||||
<div class="text-md text-secondary text-right">Previous</div>
|
||||
<div class="mt-1 text-lg font-medium">Installation</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
|
||||
[routerLink]="['../../development/directory-structure']">
|
||||
<div>
|
||||
<div class="text-md text-secondary">Next</div>
|
||||
<div class="mt-1 text-lg font-medium">Directory Structure</div>
|
||||
</div>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -137,6 +137,12 @@ export class GuidesComponent implements OnInit, OnDestroy
|
||||
title: 'Splash screen',
|
||||
type : 'basic',
|
||||
link : '/docs/guides/customization/splash-screen'
|
||||
},
|
||||
{
|
||||
id : 'customization.multi-language',
|
||||
title: 'Multi language',
|
||||
type : 'basic',
|
||||
link : '/docs/guides/customization/multi-language'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -25,6 +25,7 @@ import { TailwindCSSComponent } from 'app/modules/admin/docs/guides/customizatio
|
||||
import { ThemingComponent } from 'app/modules/admin/docs/guides/customization/theming/theming';
|
||||
import { ComponentThemingComponent } from 'app/modules/admin/docs/guides/customization/component-theming/component-theming';
|
||||
import { SplashScreenCustomizationComponent } from 'app/modules/admin/docs/guides/customization/splash-screen/splash-screen';
|
||||
import { MultiLanguageCustomizationComponent } from 'app/modules/admin/docs/guides/customization/multi-language/multi-language';
|
||||
import { JwtComponent } from 'app/modules/admin/docs/guides/authentication/jwt/jwt';
|
||||
import { guidesRoutes } from 'app/modules/admin/docs/guides/guides.routing';
|
||||
|
||||
@@ -46,6 +47,7 @@ import { guidesRoutes } from 'app/modules/admin/docs/guides/guides.routing';
|
||||
ThemingComponent,
|
||||
ComponentThemingComponent,
|
||||
SplashScreenCustomizationComponent,
|
||||
MultiLanguageCustomizationComponent,
|
||||
JwtComponent
|
||||
],
|
||||
imports : [
|
||||
|
||||
@@ -15,6 +15,7 @@ import { TailwindCSSComponent } from 'app/modules/admin/docs/guides/customizatio
|
||||
import { ThemingComponent } from 'app/modules/admin/docs/guides/customization/theming/theming';
|
||||
import { ComponentThemingComponent } from 'app/modules/admin/docs/guides/customization/component-theming/component-theming';
|
||||
import { SplashScreenCustomizationComponent } from 'app/modules/admin/docs/guides/customization/splash-screen/splash-screen';
|
||||
import { MultiLanguageCustomizationComponent } from 'app/modules/admin/docs/guides/customization/multi-language/multi-language';
|
||||
import { JwtComponent } from 'app/modules/admin/docs/guides/authentication/jwt/jwt';
|
||||
|
||||
export const guidesRoutes: Route[] = [
|
||||
@@ -114,6 +115,10 @@ export const guidesRoutes: Route[] = [
|
||||
{
|
||||
path : 'splash-screen',
|
||||
component: SplashScreenCustomizationComponent
|
||||
},
|
||||
{
|
||||
path : 'multi-language',
|
||||
component: MultiLanguageCustomizationComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user