Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-22 13:31:50 +04:00
Code Issues Projects Releases Wiki Activity

tabler plugins

Browse Source
This commit is contained in:
codecalm
2021-02-17 22:21:52 +01:00
parent 0c0d344107
commit 300c225636
8 changed files with 54 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_config.yml
+2 -1
View File
@@ -23,6 +23,7 @@ preview-url: https://preview.tabler.io
mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
npm-package: "@tabler/core"
debug: false
@@ -34,7 +35,7 @@ plugins:
- jekyll-timeago
- jekyll-redirect-from
tabler-plugins:
tabler-css-plugins:
- tabler-flags
- tabler-payments
- tabler-vendors
src/pages/_data/docs.yml
+3 -3
View File
@@ -10,9 +10,9 @@ base:
getting-started:
title: Getting Started
url: docs/getting-started.html
usage:
title: Usage
url: docs/usage.html
download:
title: Download
url: docs/download.html
content:
title: Content
src/pages/_docs/download.md
+33
View File
@@ -0,0 +1,33 @@
---
title: Download
menu: docs.base.download
description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
---
## CDN via unpkg
All files included in `{{ site.npm-package }}` npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.
```html
<script src="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/tabler.min.css">
```
You can also include additional Tabler plugins:
```html
{% removeemptylines %}
{% for plugin in site.tabler-css-plugins %}
<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/{{ plugin }}.min.css">
{% endfor %}
{% endremoveemptylines %}
```
## Package managers
Install Tabler in your Node.js powered apps with the npm package:
```
npm install {{ site.npm-package }}
```
src/pages/_docs/getting-started.md
+2 -2
View File
@@ -26,8 +26,8 @@ Once you've completed the setup, you'll be able to run the various commands prov
## Build Tabler locally
1. From the root `/tabler` directory, run `npm run start` in the command line.
2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
3. Any change in `/pages` directory will build the application and refresh the page.
2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
3. Any change in `/src` directory will build the application and refresh the page.
## Bugs and feature requests
src/pages/_docs/usage.md
-47
View File
@@ -1,47 +0,0 @@
---
title: Usage
menu: docs.base.usage
description: Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.
---
## Installation
To install the latest `tabler` npm package in your project run:
```sh
npm install @tabler/core
```
Tabler `1.0.0` major version is now in active development. To get the latest `alpha` version run:
```sh
npm install @tabler/core@alpha
```
## CDN support
All files included in `@tabler/core` npm package are available over a CDN.
### Javascript
```html
<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
```
### Styles
```html
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
```
### Other versions
To load a specific version replace `latest` with the desired version number.
```html
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css">
```
To load the latest `alpha` version replace `latest` with `alpha`.
```html
<script src="https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js"></script>
```
src/pages/_includes/docs/plugin.html
+9 -4
View File
@@ -1,4 +1,9 @@
<div class="alert alert-primary mb-4">
<h4 class="alert-title">Important!</h4>
<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
</div>
<h3>Installation</h3>
<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
<p>You can also include plugin via CDN:</p>
{% highlight html %}
<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/{{ include.plugin }}.min.css">
{% endhighlight %}
src/pages/_includes/layout/css.html
+1 -1
View File
@@ -17,7 +17,7 @@
<link href="{{ site.base }}/dist/css/tabler{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
{% for plugin in site.tabler-plugins %}
{% for plugin in site.tabler-css-plugins %}
<link href="{{ site.base }}/dist/css/{{ plugin }}{% if page.rtl or site.rtl %}.rtl{% endif %}{% if jekyll.environment != 'development' %}.min{% endif %}.css{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}" rel="stylesheet"/>
{% endfor %}
src/pages/_layouts/docs.html
+4 -4
View File
@@ -29,13 +29,13 @@ page-header: Documentation
{% endif %}
</div>
{% if page.plugin %}
{% include docs/plugin.html plugin=page.plugin %}
{% endif %}
{% if page.description %}
<p>{{ page.description }}</p>
{% endif %}
{% if page.plugin %}
{% include docs/plugin.html plugin=page.plugin %}
{% endif %}
</div>
{{ content }}