Skip to content

T
Tabler

Dashboards / Tabler
10 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 432a80a1 编写于 作者: C codecalm
浏览文件
操作

Merge branches 'dev' and 'dev-cursors-badges-colors' of... 

Merge branches 'dev' and 'dev-cursors-badges-colors' of https://github.com/tabler/tabler into dev-cursors-badges-colors

 Conflicts:
	pages/colors.html
上级 5995fe2a 447a2f67
隐藏空白更改
内联 并排
Showing with 323 addition and 272 deletion
.editorconfig
浏览文件 @ 432a80a1
......@@ -10,8 +10,8 @@ indent_style=tab
tab_width=3
[*.html]
indent_style=space
indent_size=3
insert_final_newline=false
[*.md]
indent_style=tab
......@@ -20,12 +20,3 @@ tab_width=3
[*.js.map]
indent_style=tab
indent_size=3
[{*.css,*.scss}]
indent_style=space
indent_size=2
insert_final_newline = true
[{*.yml,*.yaml}]
indent_style=space
indent_size=2
README.md
浏览文件 @ 432a80a1
......@@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
## Status
<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg" /></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
## Features
......
js/tabler-charts.js
浏览文件 @ 432a80a1
......@@ -7,7 +7,7 @@
color = $this.attr('data-spark-color') || 'blue',
type = $this.attr('data-spark-type') || 'line';
const $div = $('<div />').html(data);
const $div = $('<div/>').html(data);
$this.append($div);
let strokeColor = tabler.colors[color],
......@@ -169,9 +169,6 @@ if (window.Apex) {
yaxis: {
show: false,
labels: {
show: false,
},
},
};
}
pages/_data/charts.yml
浏览文件 @ 432a80a1
tasks-overview:
type: bar
categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24']
series:
- name: A
data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
total-sales:
type: donut
demo: true
sparkline: true
hide-legend: true
name: Total sales
series:
- name: Direct
color: blue
......@@ -16,26 +25,26 @@ total-sales:
color: yellow
data: 12
total-sales2:
type: radalBar
campaigns:
name: Campaigns
demo: true
type: radialBar
sparkline: true
hide-legend: true
series:
- name: Direct
- name: Total Sent
color: blue
data: 44
- name: Affilliate
color: green
data: 55
- name: Sponsored
color: red
data: 35
- name: E-mail
color: yellow
data: 12
- name: Reached
color: blue-light
data: 36
- name: Opened
color: blue-lighten
data: 18
tasks:
name: Tasks
demo: true
type: line
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
groups: [1, 2, 3]
......@@ -72,7 +81,7 @@ development-activity:
line:
name: Employment Growth
display: true
demo: true
type: line
show-grid: true
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
......@@ -89,7 +98,7 @@ line:
line-stroke:
name: Line chart
display: true
demo: true
type: line
stroke-curve: straight
hide-legend: true
......@@ -108,7 +117,7 @@ line-stroke:
stepline:
name: Stepline
display: true
demo: true
type: line
hide-legend: true
stroke-curve: stepline
......@@ -120,7 +129,7 @@ stepline:
temperature:
name: Monthly Average Temperature
display: true
demo: true
type: line
show-labels: true
show-data-labels: true
......@@ -139,7 +148,7 @@ temperature:
area:
name: Lorem ipsum
display: true
demo: true
type: area
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
......@@ -154,7 +163,7 @@ area:
area-spline:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
......@@ -170,12 +179,11 @@ area-spline:
area-spline-stacked:
name: Lorem ipsum
display: true
demo: true
type: area
spline: true
hide-legend: true
stacked: true
# groups: [1, 2]
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series:
- name: Maximum
......@@ -188,7 +196,7 @@ area-spline-stacked:
spline:
name: Wind speed during two days
display: true
demo: true
type: line
spline: true
show-labels: true
......@@ -205,7 +213,7 @@ spline:
spline-rotated:
name: Lorem ipsum
display: true
demo: true
type: line
spline: true
rotated: true
......@@ -222,7 +230,7 @@ spline-rotated:
bar:
name: Lorem ipsum
display: true
demo: true
type: bar
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
......@@ -236,7 +244,7 @@ bar:
bar-rotated:
name: Lorem ipsum
display: true
demo: true
type: bar
rotated: true
hide-legend: true
......@@ -252,10 +260,9 @@ bar-rotated:
bar-stacked:
name: Lorem ipsum
display: true
demo: true
type: bar
stacked: true
# groups: [1, 2]
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series:
......@@ -269,7 +276,7 @@ bar-stacked:
pie:
name: Lorem ipsum
display: true
demo: true
type: pie
hide-legend: true
show-data-labels: true
......@@ -290,7 +297,7 @@ pie:
donut:
name: Lorem ipsum
display: true
demo: true
type: donut
sparkline: true
hide-legend: true
......@@ -305,7 +312,7 @@ donut:
scatter:
name: Lorem ipsum
display: true
demo: true
type: scatter
hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
......@@ -320,7 +327,7 @@ scatter:
combination:
name: Combination chart
display: true
demo: true
type: bar
types:
2: 'line'
......
pages/_docs/avatars.md
浏览文件 @ 432a80a1
......@@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component.
{% include ui/avatar.html person-id=3 %}
{% endexample %}
### Avatar image
Set an image as the background.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=3 %}
{% include ui/avatar.html person-id=4 %}
{% endexample %}
### Initials
You can easily use initials instead of images.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" %}
{% include ui/avatar.html placeholder="CD" %}
{% include ui/avatar.html placeholder="EF" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" %}
{% endexample %}
### Avatar icons
You can also use icons in avatars.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatar initials color
Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
......@@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
### Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
{% include ui/avatar.html placeholder="CD" size="lg" %}
{% include ui/avatar.html placeholder="EF" size="md" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" size="sm" %}
{% endexample %}
### Avatar initials color
[See more]({% docs_url colors %})
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatars list
You can easily create a list of avatars.
{% example %}
{% include ui/avatar-list.html %}
{% endexample %}
### Stacked list
Make the list stack when it reaches a certain length.
{% example %}
<div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %}
......@@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endfor %}
<span class="avatar" element="a">+8</span>
</div>
{% endexample %}
{% endexample %}
\ No newline at end of file
pages/_docs/buttons.md
浏览文件 @ 432a80a1
......@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />
<input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset"/>
{% endexample %}
### Button variations
......
pages/_docs/divider.md
浏览文件 @ 432a80a1
......@@ -6,20 +6,34 @@ done: true
### Default markup
{% example html max-width=300 %}
{% example html columns=1 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">Left divider</div>
{% include ui/hr.html text="Left divider" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-center">Centered divider</div>
{% include ui/hr.html text="Centered divider" position="center" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text hr-text-right">Right divider</div>
{% include ui/hr.html text="Right divider" position="right" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
### Divider color
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Green divider" color="green" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
pages/_docs/flags.md
浏览文件 @ 432a80a1
......@@ -15,6 +15,8 @@ done: true
### Flag sizes
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% example html %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
......@@ -24,6 +26,8 @@ done: true
### Types
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
<table>
{% for flag in site.data.flags %}
<tr>
......
pages/_docs/progress.md
浏览文件 @ 432a80a1
......@@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100" />
<progress class="progress progress-sm" value="15" max="100"/>
{% endexample %}
pages/_docs/ribbons.md
浏览文件 @ 432a80a1
......@@ -12,24 +12,39 @@ new: true
### Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
`ribbon-top` - moves it to the top
`ribbon-right` - moves it to the right
`ribbon-bottom` - moves it to the bottom
`ribbon-left` - moves it to the lefg
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
Change the style of a ribbon.
{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
pages/_docs/typography.md
浏览文件 @ 432a80a1
......@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
### Semantic text elements
{% example %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
{% endexample %}
### Horizontal rules
......
pages/_includes/cards/charts/card.html 已删除 100644 → 0
浏览文件 @ 5995fe2a
{% assign data = site.data.charts[include.chart-id] %}
{% assign height = include.height | default: 10 %}
<div class="card">
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/chart.html height=height chart-id=include.chart-id %}
</div>
</div>
pages/_includes/cards/charts/total-sales.html
浏览文件 @ 432a80a1
......@@ -4,6 +4,6 @@
<h3 class="card-title">Total sales</h3>
{% include ui/chart.html chart-id="total-sales" height=15 %}
{% include ui/chart.html chart-id="total-sales2" height=15 %}
{% include ui/chart.html chart-id="campaigns" height=15 %}
</div>
</div>
pages/_includes/cards/invoices.html
浏览文件 @ 432a80a1
......@@ -3,7 +3,7 @@
<h3 class="card-title">Invoices</h3>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
......
pages/_includes/layout/css.html
浏览文件 @ 432a80a1
{% if site.data.libs %}
<!-- Libs CSS -->
{% for lib in site.data.libs.css %}
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
{% endfor %}
{% endif %}
<!-- Tabler Core -->
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
pages/_includes/layout/homepage.html
浏览文件 @ 432a80a1
......@@ -43,10 +43,10 @@
<div class="col-lg-6">
<div class="row row-deck">
<div class="col-md-12">
{% include cards/charts/card.html chart-id="temperature" height=10 %}
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div>
<div class="col-md-12">
{% include cards/charts/card.html chart-id="donut" height=10 %}
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div>
</div>
</div>
......
pages/_includes/layout/page-title.html
浏览文件 @ 432a80a1
......@@ -26,7 +26,7 @@
<div class="col-auto ml-auto">
{% if page.page-title-actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif page.page-title-actions == 'calendar' %}
......
pages/_includes/parts/form-fieldset.html
浏览文件 @ 432a80a1
<fieldset class="form-fieldset">
<div class="mb-3">
<label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" />
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" />
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control" autocomplete="off" />
<input type="email" class="form-control" autocomplete="off"/>
</div>
<div class="">
<label class="form-label">Phone number</label>
<input type="tel" class="form-control" autocomplete="off" />
<input type="tel" class="form-control" autocomplete="off"/>
</div>
</fieldset>
pages/_includes/parts/input-datalist.html
浏览文件 @ 432a80a1
<div class="mb-3">
<label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." />
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
<datalist id="datalistOptions">
{% for country in site.data.countries limit: 10 %}
<option value="{{ country | escape }}" />{% endfor %}
<option value="{{ country | escape }}"/>{% endfor %}
</datalist>
</div>
pages/_includes/parts/input-image.html
浏览文件 @ 432a80a1
......@@ -5,7 +5,7 @@
{% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} />
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="imagecheck-figure">
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
</span>
......
pages/_includes/ui/chart.html
浏览文件 @ 432a80a1
......@@ -13,130 +13,129 @@
{% capture script %}
<script>
document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: '{{ data.type }}',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if data.type == 'area' %}
fill: {
opacity: .16
},
{% endif %}
{% if data.title %}
title: {
text: '{{ data.title | escape }}'
},
{% endif %}
{% if data.dashed-history or data.stroke-curve %}
stroke: {
{% if data.dashed-history %}
width: [2, 1],
dashArray: [0, 3],
{% endif %}
{% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}',
{% endif %}
},
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% if data.show-grid %}
grid: {
show: true,
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% if data.categories or data.days-labels-count %}
xaxis: {
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
{% if data.days-labels-count %}type: 'datetime',{% endif %}
},
{% endif %}
{% if data.auto-min %}
yaxis: {
min: function(min) { return min },
},
{% endif %}
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
{% endif %}
{% if data.rotated %}
plotOptions: {
bar: {
horizontal: true,
}
},
{% endif %}
{% if data.series %}
colors: [ //chart colors
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
{% if data.hide-legend %}
legend: {
show: false, //hide legend
},
{% endif %}
{% if data.hide-tooltip %}
tooltip: {
enabled: false
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: '{{ data.type }}',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if data.type == 'area' %}
fill: {
opacity: .16
},
{% endif %}
{% if data.title %}
title: {
text: '{{ data.title | escape }}'
},
{% endif %}
{% if data.dashed-history or data.stroke-curve %}
stroke: {
{% if data.dashed-history %}
width: [2, 1],
dashArray: [0, 3],
{% endif %}
{% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}',
{% endif %}
},
{% endif %}
{% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% if data.show-grid %}
grid: {
show: true,
},
{% endif %}
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% if data.categories or data.days-labels-count %}
xaxis: {
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
{% if data.days-labels-count %}type: 'datetime',{% endif %}
},
{% endif %}
{% if data.auto-min %}
yaxis: {
min: function(min) { return min },
},
{% endif %}
{% if data.days-labels-count %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
{% endif %}
{% if data.rotated %}
plotOptions: {
bar: {
horizontal: true,
}
},
{% endif %}
{% if data.series %}
colors: [
{% for serie in data.series %}
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
],
{% endif %}
{% if data.hide-legend %}
legend: {
show: false, //hide legend
},
{% endif %}
{% if data.hide-tooltip %}
tooltip: {
enabled: false
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
</script>
{% endcapture %}
......
pages/_includes/ui/hr.html 0 → 100644
浏览文件 @ 432a80a1
<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>
pages/_includes/ui/input-mask.html
浏览文件 @ 432a80a1
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off" />
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
pages/_layouts/base.html
浏览文件 @ 432a80a1
<!doctype html>
{% include_cached layout/banner.html %}
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
<html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
......
pages/charts.html
浏览文件 @ 432a80a1
---
title: Charts
page-title: Charts
menu: charts
---
<div class="row">
{% for chart in site.data.charts %}
{% if chart[1].display %}
{% assign chart-name = chart[0] %}
{% if chart[1].demo %}
{% assign chart-id = chart[0] %}
<div class="col-lg-6 col-xl-4">
{% include cards/charts/card.html chart-id=chart-name %}
<div class="card">
{% if chart[1].name %}
<div class="card-header">
<h3 class="card-title">{{ chart[1].name }}</h3>
</div>
{% endif %}
<div class="card-body">
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
pages/tmp.html
浏览文件 @ 432a80a1
......@@ -2,12 +2,17 @@
---
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8">
</div>
<div class="col-8"></div>
</div>
<div class="row">
<div class="col-md-6">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或