-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
doc(general): general documentation update, add install into existing…
… project docs
- Loading branch information
Showing
13 changed files
with
342 additions
and
96 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,28 @@ | ||
| import { Component, OnInit, Input } from '@angular/core'; | ||
| // import * as Prism from 'prismjs'; | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
| import * as marked from 'marked'; | ||
| declare var Prism; | ||
|
|
||
| declare const Prism; | ||
|
|
||
| @Component({ | ||
| selector: 'ngd-markdown-block', | ||
| template: `<div ngdDescription [innerHtml]="markdown"></div>`, | ||
| template: ` | ||
| <div [innerHtml]="markdown"></div>`, | ||
| }) | ||
| export class NgdMarkdownComponent implements OnInit { | ||
|
|
||
| @Input() block: any; | ||
|
|
||
| markdown: string; | ||
|
|
||
| ngOnInit() { | ||
| let markdownFile = this.block.source; | ||
| this.markdown = require('raw-loader!../../../../assets/articles/' + markdownFile); | ||
| let md = marked.setOptions({ | ||
| const input = require(`raw-loader!../../../../assets/articles/${this.block.source}`); | ||
| const md = marked.setOptions({ | ||
| highlight: (code, lang = 'jsx') => { | ||
| return Prism.highlight(code.trim(), Prism.languages[lang]); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| this.markdown = md.parse(this.markdown.trim()); | ||
| this.markdown = md.parse(input.trim()); | ||
| } | ||
|
|
||
| } |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,16 @@ | ||
| import { Directive, ElementRef, AfterViewInit } from '@angular/core'; | ||
| // import 'prismjs/components/prism-jsx.js'; | ||
| import { AfterViewInit, Directive, ElementRef } from '@angular/core'; | ||
| import * as marked from 'marked'; | ||
|
|
||
| @Directive({ | ||
| selector: '[ngdDescription]', | ||
| selector: '[ngdDescription]', | ||
| }) | ||
| export class NgdDescriptionDirective implements AfterViewInit { | ||
|
|
||
| constructor(private el: ElementRef) { | ||
| } | ||
|
|
||
| ngAfterViewInit() { | ||
| let md = marked.setOptions({}); | ||
| const md = marked.setOptions({}); | ||
| this.el.nativeElement.innerHTML = md.parse(this.el.nativeElement.innerHTML.trim()); | ||
| } | ||
| } |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,45 @@ | ||
| Nebular is a full featured front-end framework based on Angular (4+). | ||
| Nebular is a set of essential modules for your next Angular application. | ||
| Its primary goal is to assemble together and connect the most awesome features and libraries creating an efficient ecosystem to speed up and simplify the development. | ||
|
|
||
| ## Current state | ||
| Nebular is in *beta* now, meaning that we are on the final path to the release. | ||
| In simpler words, Nebular is a set of generic modules (components, services & styles) helping you to solve generic tasks easier and focus on business logic. | ||
| <hr class="section-end"> | ||
|
|
||
| <div class="note note-info"> | ||
| <div class="note-title">Current state</div> | ||
| <div class="note-body"> | ||
| Nebular is in <i>RC</i> now, meaning that we are on the final path to the release. | ||
| </div> | ||
| </div> | ||
| <hr class="section-end"> | ||
| <hr class="section-end"> | ||
|
|
||
| ## What's included | ||
|
|
||
| - Reusable UI Kit | ||
| - Flexibly configurable themes with **hot-reload** | ||
| - Configurable layouts | ||
| - Auth module with multiple providers | ||
| - Modular (dependencies available as npm modules) | ||
| - Ready-to-go project structure ([Admin Starter Kit](#/docs/installation/based-on-starter-kit)) | ||
| What is included: | ||
|
|
||
| - **@nebular/theme** | ||
| - Theme System - set of SCSS rules, which allow you to modify application looks & feel by changing style-variables, with fewer custom styles. | ||
| - UI Kit - pure Angular components with two style themes and no 3rd party dependencies. | ||
| - Style overriding for Bootstrap, so that the application has a consistent look & feel. | ||
| - **@nebular/auth** | ||
| - Authentication components (login/register/reset password/restore password). | ||
| - Multiple configurable providers (backend connectors). | ||
| - Helpers for token management (storing, passing with HTTP requests, etc). | ||
| - *@nebular/acl* - module for roles and permissions management. Coming soon. | ||
| - *@nebular/dashboard* - module for draggable/resizable dashboards creation. Coming soon. | ||
| - *@nebular/data* - application data & state management. Coming soon. | ||
| - **Admin dashboard starter kit** [ngx-admin](https://github.com/akveo/ngx-admin) - application based on Nebular modules with beautiful IOT components. | ||
| <hr class="section-end"> | ||
|
|
||
| ## Assumptions | ||
|
|
||
| This documentation assumes that you are already familiar with JavaScript/TypeScript, Angular, CSS and Bootstrap. | ||
| <hr class="section-end"> | ||
|
|
||
| ## Looking for ng2-admin? | ||
| It's not gone and still supported! The ng2-admin is still available at ([Github branch](https://github.com/akveo/ng2-admin/tree/ng2-admin)). | ||
| <hr class="section-end"> | ||
|
|
||
| ## Have questions? | ||
| Didn't find something here? Look through the issues https://github.com/akveo/nebular/issues or simply drop us a line at <a href="mailto:[email protected]">[email protected]</a>. | ||
| <hr class="section-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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,130 @@ | ||
| Documentation is being developed. | ||
| If you don't have any code yet, please consider checking [Angular CLI](https://cli.angular.io/) documentation for help creating your app. | ||
| In case you want to start based on our ngx-admin starter kit, please check out [Based on Starter Kit (ngx-admin)](#/docs/installation/based-on-starter-kit-ngxadmin) article. | ||
|
|
||
| <div class="note note-info"> | ||
| <div class="note-title">ngx-admin custom components</div> | ||
| <div class="note-body"> | ||
| Please note, this tutorial explains how to install Nebular modules into your project including Theme System, Auth and UI Kit. | ||
| If you want to re-use any of ngx-admin <strong>custom</strong> components (like Temperature Widget, Dashboard charts, etc) without using ngx-admin itself, | ||
| please follow this guide and in the end just copy any of ngx-admin custom components you need into your project, register them in your modules and that's it. | ||
| </div> | ||
| </div> | ||
| <hr class="section-end"> | ||
|
|
||
| ## Installing dependencies | ||
| 1) At this step, we assume you already have Angular modules installed. Now let's install Angular Bootstrap which is the only peer dependency left: | ||
|
|
||
| ```bash | ||
| npm i -S [email protected] | ||
| ``` | ||
| <hr class="section-end"> | ||
|
|
||
| 2) Then install Nebular modules: | ||
|
|
||
| ```bash | ||
| npm i -S @nebular/theme @nebular/auth | ||
| ``` | ||
| You can remove `@nebular/auth` from the command if you don't need authentication part in your project. | ||
| <hr class="section-end"> | ||
|
|
||
| 3) At this stage you have everything in place, let's configure Nebular in the app module. | ||
|
|
||
| ```typescript | ||
|
|
||
| import { NbThemeModule } from '@nebular/theme'; | ||
|
|
||
| ... | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| ... | ||
| NbThemeModule.forRoot({ name: 'default' }), // this will enable the default theme, you can change this to `cosmic` to enable the dark theme | ||
| ] | ||
| }) | ||
| export class AppModule { | ||
|
|
||
| ``` | ||
| Same way you can enable Auth Module, in more details this described under [Auth Module Concepts & Install](#/docs/auth/conceptsinstall) article. | ||
| <hr class="section-end"> | ||
| 4) Now, let's import Nebular styles: | ||
| Include Bootstrap and default Nebular theme CSS files into your `.angular-cli.json` file: | ||
| ``` | ||
| "styles": [ | ||
| "../node_modules/bootstrap/dist/css/bootstrap.css", | ||
| "../node_modules/@nebular/theme/styles/prebuilt/default.css", // or cosmic.css | ||
| ], | ||
| ``` | ||
| <div class="note note-info"> | ||
| <div class="note-title">Advanced Theme System configuration</div> | ||
| <div class="note-body"> | ||
| In this article we describe the very basic styles installation. If you need more advanced features, like theme variables management, | ||
| or even multiple themes switching - check out <a href="#/docs/guides/enabling-theme-system">Enabling Theme System</a> article. | ||
| </div> | ||
| </div> | ||
| <hr class="section-end"> | ||
| 5) Now, let's create a simple Nebular page (header + sidebar) in your project. We assume that you have a separate module per page, let's open your `some-page.module.ts` and import necessary layout components: | ||
| ```typescript | ||
|
|
||
| import { NbSidebarModule, NbLayoutModule, NbSidebarService } from '@nebular/theme'; | ||
|
|
||
| ... | ||
|
|
||
| @NgModule({ | ||
| ... | ||
| imports: [ | ||
| NbLayoutModule, | ||
| NbSidebarModule, | ||
| ], | ||
| providers: [NbSidebarService], // we need this service for the sidebar | ||
| ... | ||
| }) | ||
| export class SomePageModule { | ||
|
|
||
| ``` | ||
| Then let's add layout components with a sticky header into your `page.component.ts`: | ||
| ```typescript | ||
|
|
||
| @Component({ | ||
| ... | ||
| template: ` | ||
| <nb-layout> | ||
| <nb-layout-header fixed>Company Name</nb-layout-header> | ||
| <nb-sidebar>Sidebar Content</nb-sidebar> | ||
| <nb-layout-column>Page Content</nb-layout-column> | ||
| </nb-layout> | ||
| ` | ||
| }) | ||
| export class SomePageComponent { | ||
|
|
||
| ``` | ||
| And done! At this step, you should have a page with a simple layout on it. | ||
| <hr class="section-end"> | ||
| <div class="note note-info"> | ||
| <div class="note-title">Adding into existing page</div> | ||
| <div class="note-body"> | ||
| In case you already have some code on your page and want to mix it with Nebular components you would need to place your page code inside of the Nebular layout. | ||
| For Nebular to work it is required to have the `<nb-layout></nb-layout>` component at the top. | ||
| </div> | ||
| </div> | ||
| <hr class="section-end"> | ||
| ## Next | ||
| - [Advanced Theme System configuration](#/docs/guides/enabling-theme-system). | ||
| - [Nebular UI Kit](#/docs/concepts/ui-kit). | ||
| - [NbLayout, NbLayoutColumn, NbLayoutHeader, NbLayoutFooter](#/docs/components/layout). | ||
| - [Deploying to production server](#/docs/guides/server-deployment). |
Oops, something went wrong.