- Copy and paste
rtl.config.js
file. - Add packages to the
package.json
file (copy them from the package.json) below and re-install packages withyarn
command. - Run the command:
yarn run webpack --config webpack-rtl.config.js
- In the file
src/index.tsx
file comment rows [18, 19]:// import './_metronic/assets/sass/plugins.scss'
// import './_metronic/assets/sass/style.scss'
- In the file
src/index.tsx
add the row:import './_metronic/assets/css/style.rtl.css'
(! before style.react.scss). - In the file
public/index.html
update the html tag with:<html direction="rtl" dir="rtl" style="direction: rtl">
- Find and replace next attributes in the project:
data-kt-menu-placement='bottom-start' => data-kt-menu-placement='bottom-end'
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "demo3", | |
"version": "8.0.38", | |
"private": true, | |
"homepage": "/metronic8/react/demo3", | |
"dependencies": { | |
"@formatjs/intl-pluralrules": "^4.0.28", | |
"@formatjs/intl-relativetimeformat": "^9.1.7", | |
"@fortawesome/fontawesome-free": "^5.15.3", | |
"@popperjs/core": "~2.10.1", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ! CKEditor doesn't have a port to the Typescript version, cause of that we use @ts-ignore a lot here: | |
// @ts-ignore | |
import {CKEditor} from '@ckeditor/ckeditor5-react' | |
// @ts-ignore | |
import ClassicEditor from '@ckeditor/ckeditor5-build-classic' | |
const CKExampleComponent = () => { | |
return (<CKEditor | |
editor={ClassicEditor} |
!!! Check out the official documentation of CKEditort first https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html.
- Run the command:
yarn add ckeditor4-angular
. - import
CKEditorModule
to your application. - Add variable
editorData
and methodonChange
into code behind (See example inyour.component.ts
file). - Add
ckeditor
into your HTML markup (See example inyour.component.html
file).
Basic skeleton preparation:
- Remove unnecessary modules in the folder
src/app/modules
. (!!!Except auth, i18n and errors folders). - Comment unnecessary routes in the
src/app/pages/routing.ts file
. [9-45] rows. - Clear Dashboard
src/app/pages/dashboard.component.html
file. - Clear Dashboard module
src/app/pages/dashboard.module.ts
file (!remove WidgetsModule from the code, rows [5, 17]. - Remove Widgets
src/_metronic/partials/content/widgets
folder and the filesrc/app/_metronic/partials/index.ts
file comment row [3]. - Clear Aside menu in the file
src/app/_metronic/layout/components/aside/aside-menu/aside-menu.component.html
. Keep only Dashboard menu item. (For demo1 also need to clearsrc/app/_metronic/layout/components/sidebar/sidebar-menu/sidebar-menu.component.html
file) - Clear Header menu in the file
src/app/_metronic/layout/components/header/header-menu/header-menu.component.html
. Keep only dashboard menu item. - In case if you don't need Aut