162 lines
8.4 KiB
HTML
162 lines
8.4 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Optima Admin Theme</title>
|
|
|
|
<!-- Add to homescreen for Chrome on Android -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="assets/material.min.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
#view-source {
|
|
position: fixed;
|
|
display: block;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin-right: 40px;
|
|
margin-bottom: 40px;
|
|
z-index: 900;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
|
|
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
|
|
</div>
|
|
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
|
|
<h5>Optima Theme Documentation</h5>
|
|
</div>
|
|
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
|
|
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
|
|
<a href="#cli" class="mdl-layout__tab">Getting Started</a>
|
|
<a href="#td" class="mdl-layout__tab">3rd Party</a>
|
|
</div>
|
|
</header>
|
|
<main class="mdl-layout__content">
|
|
<div class="mdl-layout__tab-panel is-active" id="overview">
|
|
<section class="section--center mdl-grid mdl-grid--no-spacing">
|
|
<div class="column bl">
|
|
<h4>
|
|
Overview
|
|
</h4>
|
|
<p>
|
|
This documentation is to help you understand the template's structure. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML, CSS and JS knowledge is required to customize this template.
|
|
</p>
|
|
<p>
|
|
If you have any questions that are beyond the scope of this help file, please feel free to get in touch.
|
|
</p>
|
|
|
|
<p>
|
|
Support for my items includes:
|
|
</p>
|
|
<ul class="toc">
|
|
<a>
|
|
Responding to questions or problems regarding the item and its features
|
|
</a>
|
|
<a>
|
|
Fixing bugs and reported issues
|
|
</a>
|
|
<a>
|
|
Providing updates to ensure compatibility with new software versions
|
|
</a>
|
|
</ul>
|
|
<p>
|
|
Item support does not include:
|
|
</p>
|
|
<ul class="toc">
|
|
<a>
|
|
Customization and installation services
|
|
</a>
|
|
<a>
|
|
Support for third party software and plug-ins
|
|
</a>
|
|
</ul>
|
|
|
|
<h5 class="mt25">
|
|
What is it?
|
|
</h5>
|
|
<p>
|
|
Optima is a creative admin template built for Angular 5 and Angular 6. It comes out of the box with AoT and lazy loading support, Language translation , RTL support and light and dark colour schemes. With this, you get all you need to start working on your SAAS, CRM, CMS or dashboard based project.
|
|
</p>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="mdl-layout__tab-panel" id="cli">
|
|
<section class="section--center mdl-grid mdl-grid--no-spacing">
|
|
<div class="mdl-cell mdl-cell--12-col">
|
|
<h4>Getting started</h4>
|
|
|
|
<p>This template is built with angular-cli and requires Node and NPM to be installed.</p>
|
|
|
|
<h6>Installing the prerequisites</h6>
|
|
<p><strong>Node.js and NPM:</strong> You can download Node.js from <a href="https://nodejs.org">https://nodejs.org</a>. NPM comes bundled with Node.js</p>
|
|
|
|
<p><strong>angular-cli:</strong> You can install angular-cli by executing from your terminal <b>npm install -g @angular/cli</b>. More details can be found here <a href="https://github.com/angular/angular-cli">https://github.com/angular/angular-cli</a> </p>
|
|
|
|
<h6>Installing the npm packages</h6>
|
|
<p>Before proceding you'll need to install npm packages. You can do this by running <strong>npm install</strong> from the root of your project to install all the necessary dependencies.</p>
|
|
|
|
<h5>Using CLI</h5>
|
|
<h6>Development server</h6>
|
|
<p>Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.</p>
|
|
|
|
<h6>Code scaffolding</h6>
|
|
<p>Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.</p>
|
|
|
|
<h6>Building</h6>
|
|
<p>Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. Use `--aot` flag for a AoT build</p>
|
|
|
|
<h6>Further help</h6>
|
|
<p>To get more help on the `angular-cli` use `ng --help` or go check out <a href="https://github.com/angular/angular-cli">https://github.com/angular/angular-cli</a>.</p>
|
|
|
|
<h5>Layout Engine</h5>
|
|
<p>For the layout, the template uses @angular/flex-layout angular 2+ component layout engine which uses flexbox css. For detailed usage information you can read the docs over at <a href="https://github.com/angular/flex-layout">https://github.com/angular/flex-layout</a> </p>
|
|
|
|
<h5>Theming and RTL</h5>
|
|
<p><b>Dark theme:</b> To activate the dark theme simply add the class app-dark to the div.app in layout-dashboard.component.html</p>
|
|
|
|
<p><b>RTL:</b> For direction use the [dir] directive with either ltr or rtl.</p>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="mdl-layout__tab-panel" id="td">
|
|
<section class="section--center mdl-grid mdl-grid--no-spacing">
|
|
<div class="mdl-cell mdl-cell--12-col">
|
|
<h4>3rd party components</h4>
|
|
<ul>
|
|
<a href="https://github.com/angular/flex-layout">Angular component Layout engine; using flexbox-2016 css</a>
|
|
<a href="https://github.com/angular/material2">Material Design components for Angular</a>
|
|
<a href="https://github.com/mattlewis92/angular-calendar">Angular calendar - A flexible calendar component for angular 2.0+ that can display events on a month, week or day view.</a>
|
|
<a href="https://github.com/swimlane/angular2-data-table">A feature-rich yet lightweight data-table crafted for Angular2</a>
|
|
<a href="https://github.com/SebastianM/angular2-google-maps">Angular components for Google Maps</a>
|
|
<a href="https://github.com/500tech/angular2-tree-component">A simple yet powerful tree component for Angular2</a>
|
|
<a href="https://github.com/valor-software/ng2-dragula">Simple drag and drop with dragula</a>
|
|
<a href="http://leafletjs.com/">An open-source JavaScript library for mobile-friendly interactive maps</a>
|
|
<a href="https://github.com/valor-software/ng2-charts">Beautiful charts for Angular2 based on Chart.js</a>
|
|
<a href="https://github.com/valor-software/ng2-file-upload">Easy to use Angular2 components for files upload</a>
|
|
<a href="https://github.com/ocombe/ng2-translate">An implementation of angular translate for Angular</a>
|
|
<a href="https://github.com/yuyang041060120/ng2-validation">angular2 validation</a>
|
|
<a href="http://quilljs.com/">Your powerful, rich text editor</a>
|
|
<a href="https://github.com/sindresorhus/screenfull.js/">Simple wrapper for cross-browser usage of the JavaScript Fullscreen API</a>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="assets/material.min.js"></script>
|
|
</body>
|
|
</html>
|