Skip to content

Commit

Permalink
Distribute styles, assets and themes
Browse files Browse the repository at this point in the history
  • Loading branch information
marjan-georgiev committed Sep 5, 2019
1 parent e4c361b commit 18db69b
Show file tree
Hide file tree
Showing 7 changed files with 2,305 additions and 184 deletions.
11 changes: 5 additions & 6 deletions docs/introduction/installing.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
# Installing

You can grab the latest release from the [Releases Page](https://github.com/swimlane/ngx-datatable/releases)
You can grab the latest release from the [Releases Page](https://github.com/swimlane/ngx-datatable/releases)
in Github or via [NPM](https://www.npmjs.com/package/@swimlane/ngx-datatable).

* `npm install @swimlane/ngx-datatable`
- `npm install @swimlane/ngx-datatable`

Also, the release code is checked in and resides [here](https://github.com/swimlane/ngx-datatable/tree/master/release).

### Module Version
The module is packaged using UMD. The file is `release/index.js`.

### CSS
If you want to use material theme, include `./release/material.css`. For more information, visit the 'Themes' section.

If you want to use material theme, include `./themes/material.css`. For more information, visit the 'Themes' section.

## Developing

If you are wanting to run the demos locally, just do:

- `npm i`
Expand Down
17 changes: 12 additions & 5 deletions docs/introduction/themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,29 @@

Out of the box, the data-table is not styled. This gives you maximum flexibility.

There is a separate material theme distributed with data-table. In order to use it, you need to
include that in your application `release/material.css` and add the CSS class `material` to your data-table.
There is a separate material theme distributed with data-table. In order to use it, you need to
include that in your application `themes/material.css` and add the CSS class `material` to your data-table.

This is a simple way to apply the style of the demo.

```scss
@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';
```

You can just add above to your `scss` file and then specify the class of your ngx-datatable to `<ngx-datatable class="material">`

## CSS Classes

- `ngx-datatable`: Master Table class

- `fixed-header`: The header is fixed on the table

- `datatable-header`: Header row class

- `datatable-header-cell`: Header cell class

- `resizeable`: Cell resizeable class
- `sortable`: Cell drag/drop sortable class
- `longpress`: Cell long-press activated
Expand All @@ -31,6 +37,7 @@ You can just add above to your `scss` file and then specify the class of your ng
- `draggable`: Header cell draggable class

- `datatable-body-row`: Body row class

- `datatable-row-even`: Odd row class
- `datatable-row-odd`: Even row class

Expand Down
Loading

0 comments on commit 18db69b

Please sign in to comment.