Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moved some examples to new /examples route #213

Merged
merged 7 commits into from
Mar 24, 2017
Merged

Moved some examples to new /examples route #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ae44008
fix(documentation): moved some examples to new /examples route
damnko Mar 9, 2017
b0e1797
fix(completer): fix #164
Mar 10, 2017
65a4f8b
fix(documentation): moved some examples to new /examples route
damnko Mar 9, 2017
265dd05
fix(documentation): file extensions and other minor things
damnko Mar 10, 2017
229574d
fix(documentation): moved examples to a separate async module
damnko Mar 10, 2017
156e336
Merge branch 'documentation-refactor' of https://github.com/damnko/ng…
damnko Mar 10, 2017
88402e9
fix(documentation): merge errors
damnko Mar 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions demo/src/app/pages/demo/demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<header-component tagline="Quick Start & Demo"></header-component>
<section class="main-content">

<h2 ><a id="getting-started" class="anchor" href="#getting-started" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Getting Started</h2>
<p>
Hello and Welcome!
</p>

<h3><a id="installation" class="anchor" href="#installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installation</h3>
<p>
The library is available as npm package, so all you need to do is to run the following command:
</p>
<pre>
<code class="bash">{{ snippets.install }}</code>
</pre>
<p>This command will create a record in your `package.json` file and install the package into the npm modules folder.</p>

<h2><a id="examples" class="anchor" href="#examples" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Examples</h2>
<h3><a id="minimal-setup" class="anchor" href="#minimal-setup" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Minimal Setup Example</h3>
<p>
First thing you need to do is to import the ng2-smart-table directives into your component.
</p>
<pre>
<code class="typescript">{{ snippets.require }}</code>
</pre>
<p>
Then register it by adding to the list of directives of your module:
</p>
<pre>
<code class="typescript">{{ snippets.directive }}</code>
</pre>
<p>
Now, we need to configure the table and add it into the template. The only <strong>required</strong> setting for the component to start working is a columns configuration.<br>
Let's register <i>settings</i> property inside of the component where we want to have the table and configure some columns (<a [routerLink]="['/documentation']">Settings documentation</a>):
</p>
<pre>
<code class="typescript">{{ snippets.settings }}</code>
</pre>
<p>
Finally let's put the ng2-smart-table component inside of the template:
</p>
<pre>
<code class="typescript">{{ snippets.template }}</code>
</pre>
<p>
At this step you will have a minimally configured table which should look something like this:
</p>
<div>
<basic-example></basic-example>
</div>
<p>
All functions are available by default and you don't need to configure them somehow, so you already able to add/edit/delete rows, sort or filter the table, etc.
</p>
<p>
But it feels like something is missing... Right, there is no data in the table by default. To add some, let's create an array property with a list of objects in the component. Please note that object keys are same as in the columns configuration.
</p>
<pre>
<code class="typescript">{{ snippets.array }}</code>
</pre>
<p>And pass the data to the table:</p>
<pre>
<code class="typescript">{{ snippets.dataTemplate }}</code>
</pre>
<p>Now you have some data in the table:</p>
<div>
<basic-example-data></basic-example-data>
</div>
<p>
That's it for a minimal setup, our final component should look like this, pretty simple, huh?
</p>
<pre class="with-source">
<a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/basic-example-data.component.ts" target="_blank">Demo Source</a>
<code class="typescript">{{ snippets.basicFull }}</code>
</pre>

<p>Full component documentation you can find <a [routerLink]="['/documentation']">here</a>.</p>
</section>
6 changes: 6 additions & 0 deletions demo/src/app/pages/demo/demo.scss → demo/src/app/pages/demo/demo.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@
}
}

.examples-menu {
a.active {
font-weight: bold;
}
}

@media screen and (max-width: 64em) {
.with-sidebar {

Expand Down
15 changes: 2 additions & 13 deletions demo/src/app/pages/demo/demo.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,14 @@ import * as hljs from 'highlight.js';

import 'style-loader!../../../../../node_modules/highlight.js/styles/dracula.css';

import 'style-loader!./demo.scss';
import 'style-loader!./demo.component.scss';

@Component({
selector: 'demo',
templateUrl: 'demo.html',
templateUrl: './demo.component.html',
})
export class DemoComponent {

sidebarScrolled = false;
sidebarOffset = 0;

snippets = {
install: require('raw-loader!./snippets/install.md'),
require: require('raw-loader!./snippets/require.md'),
Expand All @@ -23,14 +20,6 @@ export class DemoComponent {
array: require('raw-loader!./snippets/array.md'),
dataTemplate: require('raw-loader!./snippets/data-template.md'),
basicFull: require('raw-loader!./snippets/basic-full.md'),
sourceRequire: require('raw-loader!./snippets/source-require.md'),
createSource: require('raw-loader!./snippets/create-source.md'),
sourceTemplate: require('raw-loader!./snippets/source-template.md'),
search: require('raw-loader!./snippets/search.md'),
searchTable: require('raw-loader!./snippets/search-table.md'),
sourceFull: require('raw-loader!./snippets/source-full.md'),
hideFilters: require('raw-loader!./snippets/hide-filters.md'),
customEditorModule: require('raw-loader!./snippets/custom-editor-module.md'),
};

constructor() {
Expand Down
236 changes: 0 additions & 236 deletions demo/src/app/pages/demo/demo.html
View file
Open in desktop

This file was deleted.

9 changes: 1 addition & 8 deletions ...pp/pages/documentation/documentation.html → ...ocumentation/documentation.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
<section class="page-header internal">
<h1 class="project-name"><a [routerLink]="['']">ng2-smart-table</a></h1>
<h2 class="project-tagline">Documentation</h2>

<a routerLinkActive="active" routerLink="/demo" class="btn">Quick Start & Demos</a>
<a routerLinkActive="active" routerLink="/documentation" class="btn">Documentation</a>
<a target="_blank" href="https://github.com/akveo/ng2-smart-table" class="btn">View on GitHub</a>
</section>
<header-component tagline="Documentation"></header-component>

<section class="main-content">
<h2><a id="documentation" class="anchor" href="#documentation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Documentation</h2>
Expand Down
0 ...pp/pages/documentation/documentation.scss → ...ocumentation/documentation.component.scss
View file
Open in desktop
File renamed without changes.
5 changes: 2 additions & 3 deletions demo/src/app/pages/documentation/documentation.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { Component } from '@angular/core';

import 'style-loader!./documentation.scss';
import 'style-loader!./documentation.component.scss';

@Component({
selector: 'demo',
templateUrl: 'documentation.html',
styleUrls: ['documentation.scss']
templateUrl: './documentation.component.html'
})
export class DocumentationComponent {

Expand Down
Loading