Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 838f1eaf 编写于 作者: C chomik
浏览文件
操作

Merge branches 'dev' and 'master' of https://github.com/tabler/tabler into dev

上级 1239d349 4b7e5213
隐藏空白更改
内联 并排
Showing with 288 addition and 269 deletion
README.md
浏览文件 @ 838f1eaf
......@@ -6,7 +6,7 @@ Premium and Open Source dashboard template with responsive and high quality UI.
<strong><a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a></strong>
<br><br><br>
<br><br>
![Tabler preview](https://tabler.github.io/assets/images/dashboard.png)
......@@ -14,13 +14,13 @@ Premium and Open Source dashboard template with responsive and high quality UI.
<img src="https://tabler.github.io/assets/images/features/features-2.png" width="400" align="right" style="max-width: 50%">
We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
We’ve created this admin panel for everyone who wants to create any template based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge, as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tsbler is responsive in all major browsers.
* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
* **Cross Browser:** Our theme works perfectly with: Latest Chrome, Firefox+, Latest Safari, Opera, Internet Explorer 10+ and mobile browsers. We’re working hard to support them.
* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtile CSS3 animations so you will get anyone’s attention.
* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3c valid.
* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom of choosing and combining. All components can take variation in color and styling, that can easily be modified using Sass. The sky is the limit!
* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom of choosing and combining. All components can have variation in color and styling, that can easily be modified using Sass. The sky is the limit!
## Documentation
......@@ -36,15 +36,15 @@ git clone https://github.com/tabler/tabler.git
### Setup environment
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
To use our build system and run documentation locally, you'll need a copy of Tabler's source files and Node. Follow the steps below:
1. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
1. [Download and install Node.js](https://nodejs.org/download/), which is used to manage our dependencies.
2. Navigate to the root `/tabler` directory and run `npm install` to install local dependencies listed in `package.json`.
3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/), install [Bundler](https://bundler.io/) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
**Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems.
When completed, you'll be able to run the various commands provided from the command line.
When completed, you'll be able to run the various commands provided in the command line.
### Build Tabler
......
dist/assets/js/core.js
浏览文件 @ 838f1eaf
var hexToRgba = function(hex, opacity) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var rgb = result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
/**
*
*/
let hexToRgba = function(hex, opacity) {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
let rgb = result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
};
$(document).ready(function () {
// Initialize tooltips
$('[data-toggle="tooltip"]').tooltip();
// Initialize popovers
$('[data-toggle="popover"]').popover({
html: true
});
// Function for remove card
$('[data-toggle="card-remove"]').on('click', function (e) {
var $card = $(this).closest('div.card');
$card.remove();
e.preventDefault();
return false;
});
// Function for collapse card
$('[data-toggle="card-collapse"]').on('click', function (e) {
var $this = $(this),
$card = $this.closest('div.card');
$card.toggleClass('card-collapsed');
e.preventDefault();
return false;
});
// Function for fullscreen card
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
var $card = $(this).closest('div.card');
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
e.preventDefault();
return false;
});
if($('[data-sparkline]').length) {
var generateSparkline = function($elem, data, params) {
$elem.sparkline(data, {
type: $elem.attr('data-sparkline-type'),
height: '100%',
barColor: params.color,
lineColor: params.color,
fillColor: 'transparent',
spotColor: params.color,
spotRadius: 0,
lineWidth: 2,
highlightColor: hexToRgba(params.color, .6),
highlightLineColor: '#666',
defaultPixelsPerValue: 5
});
};
require(['sparkline'], function(){
$('[data-sparkline]').each(function(){
var $chart = $(this);
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
color: $chart.attr('data-sparkline-color')
});
});
/**
*
*/
$(document).ready(function() {
/** Constant div card */
const DIV_CARD = 'div.card';
/** Initialize tooltips */
$('[data-toggle="tooltip"]').tooltip();
/** Initialize popovers */
$('[data-toggle="popover"]').popover({
html: true
});
/** Function for remove card */
$('[data-toggle="card-remove"]').on('click', function(e) {
let $card = $(this).closest(DIV_CARD);
$card.remove();
e.preventDefault();
return false;
});
/** Function for collapse card */
$('[data-toggle="card-collapse"]').on('click', function(e) {
let $card = $(this).closest(DIV_CARD);
$card.toggleClass('card-collapsed');
e.preventDefault();
return false;
});
/** Function for fullscreen card */
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
let $card = $(this).closest(DIV_CARD);
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
e.preventDefault();
return false;
});
/** */
if ($('[data-sparkline]').length) {
let generateSparkline = function($elem, data, params) {
$elem.sparkline(data, {
type: $elem.attr('data-sparkline-type'),
height: '100%',
barColor: params.color,
lineColor: params.color,
fillColor: 'transparent',
spotColor: params.color,
spotRadius: 0,
lineWidth: 2,
highlightColor: hexToRgba(params.color, .6),
highlightLineColor: '#666',
defaultPixelsPerValue: 5
});
};
require(['sparkline'], function() {
$('[data-sparkline]').each(function() {
let $chart = $(this);
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
color: $chart.attr('data-sparkline-color')
});
}
if($('.chart-circle').length) {
require(['circle-progress'], function () {
$('.chart-circle').each(function () {
var $this = $(this);
$this.circleProgress({
fill: {
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
},
size: $this.height(),
startAngle: -Math.PI / 4 * 2,
emptyFill: '#F4F4F4',
lineCap: 'round'
});
});
});
});
}
/** */
if ($('.chart-circle').length) {
require(['circle-progress'], function() {
$('.chart-circle').each(function() {
let $this = $(this);
$this.circleProgress({
fill: {
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
},
size: $this.height(),
startAngle: -Math.PI / 4 * 2,
emptyFill: '#F4F4F4',
lineCap: 'round'
});
}
});
});
}
});
\ No newline at end of file
dist/form-elements.html
浏览文件 @ 838f1eaf
......@@ -594,10 +594,10 @@
</div>
<div class="col-md-6 col-lg-4">
<div class="form-group">
<label class="form-label">Radios</label>
<div class="form-label">Radios</div>
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
<div class="custom-control-label">Option 1</div>
</label>
<label class="custom-control custom-radio">
......@@ -617,57 +617,56 @@
<div class="form-group">
<div class="form-label">Inline Radios</div>
<div class="custom-controls-stacked">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
<span class="custom-control-label">Option 1</span>
</div>
<div class="custom-control custom-radio">
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
<span class="custom-control-label">Option 2</span>
</div>
<div class="custom-control custom-radio">
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
<span class="custom-control-label">Option 3</span>
</div>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Checkboxes</label>
<div class="form-label">Checkboxes</div>
<div class="custom-controls-stacked">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
<span class="custom-control-label">Option 1</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<span class="custom-control-label">Option 2</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
<label class="custom-control-label">Option Disabled</label>
</div>
<div class="custom-control custom-checkbox">
<span class="custom-control-label">Option Disabled</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
<label class="custom-control-label">Option Disabled Checked</label>
</div>
<span class="custom-control-label">Option Disabled Checked</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-label">Inline Checkboxes</div>
<div class="custom-controls-stacked">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
checked="">
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
<span class="custom-control-label">Option 1</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<span class="custom-control-label">Option 2</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
<label class="custom-control-label">Option 3</label>
</div>
<span class="custom-control-label">Option 3</span>
</label>
</div>
</div>
<div class="form-group">
......
src/_data/menu.yml
浏览文件 @ 838f1eaf
......@@ -72,7 +72,7 @@ pages:
401:
name: 401 error
url: 104.html
url: 401.html
403:
name: 403 error
......@@ -112,4 +112,4 @@ gallery:
docs:
name: Documentation
icon: fe fe-file-text
url: docs/index.html
\ No newline at end of file
url: docs/index.html
src/_includes/cards/development-activity.html
浏览文件 @ 838f1eaf
......@@ -31,7 +31,7 @@
<tr>
<td><span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[16].photo }})"></span></td>
<td>{{ site.data.users[16].name }} {{ site.data.users[16].surname }}</td>
<td>Left sidebar adjusments</td>
<td>Left sidebar adjustments</td>
<td class="text-nowrap">April 15, 2018</td>
<td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
</tr>
......@@ -54,4 +54,4 @@
</div>
</div>
{% include js-charts.html id="chart-development-activity" data="development-activity" %}
\ No newline at end of file
{% include js-charts.html id="chart-development-activity" data="development-activity" %}
src/_includes/cards/form-all-elements.html
浏览文件 @ 838f1eaf
......@@ -232,10 +232,10 @@
</div>
<div class="col-md-6 col-lg-4">
<div class="form-group">
<label class="form-label">Radios</label>
<div class="form-label">Radios</div>
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
<div class="custom-control-label">Option 1</div>
</label>
<label class="custom-control custom-radio">
......@@ -255,57 +255,57 @@
<div class="form-group">
<div class="form-label">Inline Radios</div>
<div class="custom-controls-stacked">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
<span class="custom-control-label">Option 1</span>
</div>
<div class="custom-control custom-radio">
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
<span class="custom-control-label">Option 2</span>
</div>
<div class="custom-control custom-radio">
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
<span class="custom-control-label">Option 3</span>
</div>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Checkboxes</label>
<div class="form-label">Checkboxes</div>
<div class="custom-controls-stacked">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
<label class="custom-control-label">Option Disabled</label>
</div>
<div class="custom-control custom-checkbox">
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
<label class="custom-control-label">Option Disabled Checked</label>
</div>
</label>
</div>
</div>
<div class="form-group">
<div class="form-label">Inline Checkboxes</div>
<div class="custom-controls-stacked">
<div class="custom-control custom-checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
checked="">
checked>
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
<label class="custom-control-label">Option 3</label>
</div>
</label>
</div>
</div>
<div class="form-group">
......
src/assets/js/core.js
浏览文件 @ 838f1eaf
var hexToRgba = function(hex, opacity) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var rgb = result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
/**
*
*/
let hexToRgba = function(hex, opacity) {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
let rgb = result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
};
$(document).ready(function () {
// Initialize tooltips
$('[data-toggle="tooltip"]').tooltip();
// Initialize popovers
$('[data-toggle="popover"]').popover({
html: true
});
// Function for remove card
$('[data-toggle="card-remove"]').on('click', function (e) {
var $card = $(this).closest('div.card');
$card.remove();
e.preventDefault();
return false;
});
// Function for collapse card
$('[data-toggle="card-collapse"]').on('click', function (e) {
var $this = $(this),
$card = $this.closest('div.card');
$card.toggleClass('card-collapsed');
e.preventDefault();
return false;
});
// Function for fullscreen card
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
var $card = $(this).closest('div.card');
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
e.preventDefault();
return false;
});
if($('[data-sparkline]').length) {
var generateSparkline = function($elem, data, params) {
$elem.sparkline(data, {
type: $elem.attr('data-sparkline-type'),
height: '100%',
barColor: params.color,
lineColor: params.color,
fillColor: 'transparent',
spotColor: params.color,
spotRadius: 0,
lineWidth: 2,
highlightColor: hexToRgba(params.color, .6),
highlightLineColor: '#666',
defaultPixelsPerValue: 5
});
};
require(['sparkline'], function(){
$('[data-sparkline]').each(function(){
var $chart = $(this);
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
color: $chart.attr('data-sparkline-color')
});
});
/**
*
*/
$(document).ready(function() {
/** Constant div card */
const DIV_CARD = 'div.card';
/** Initialize tooltips */
$('[data-toggle="tooltip"]').tooltip();
/** Initialize popovers */
$('[data-toggle="popover"]').popover({
html: true
});
/** Function for remove card */
$('[data-toggle="card-remove"]').on('click', function(e) {
let $card = $(this).closest(DIV_CARD);
$card.remove();
e.preventDefault();
return false;
});
/** Function for collapse card */
$('[data-toggle="card-collapse"]').on('click', function(e) {
let $card = $(this).closest(DIV_CARD);
$card.toggleClass('card-collapsed');
e.preventDefault();
return false;
});
/** Function for fullscreen card */
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
let $card = $(this).closest(DIV_CARD);
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
e.preventDefault();
return false;
});
/** */
if ($('[data-sparkline]').length) {
let generateSparkline = function($elem, data, params) {
$elem.sparkline(data, {
type: $elem.attr('data-sparkline-type'),
height: '100%',
barColor: params.color,
lineColor: params.color,
fillColor: 'transparent',
spotColor: params.color,
spotRadius: 0,
lineWidth: 2,
highlightColor: hexToRgba(params.color, .6),
highlightLineColor: '#666',
defaultPixelsPerValue: 5
});
};
require(['sparkline'], function() {
$('[data-sparkline]').each(function() {
let $chart = $(this);
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
color: $chart.attr('data-sparkline-color')
});
}
if($('.chart-circle').length) {
require(['circle-progress'], function () {
$('.chart-circle').each(function () {
var $this = $(this);
$this.circleProgress({
fill: {
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
},
size: $this.height(),
startAngle: -Math.PI / 4 * 2,
emptyFill: '#F4F4F4',
lineCap: 'round'
});
});
});
});
}
/** */
if ($('.chart-circle').length) {
require(['circle-progress'], function() {
$('.chart-circle').each(function() {
let $this = $(this);
$this.circleProgress({
fill: {
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
},
size: $this.height(),
startAngle: -Math.PI / 4 * 2,
emptyFill: '#F4F4F4',
lineCap: 'round'
});
}
});
});
}
});
\ No newline at end of file
src/assets/scss/dashboard/_aside.scss
浏览文件 @ 838f1eaf
......@@ -21,7 +21,7 @@
.aside-body {
padding: 1.5rem;
flex: 1;
flex: 1 1 auto;
overflow: auto;
}
......
src/assets/scss/dashboard/_cards.scss
浏览文件 @ 838f1eaf
......@@ -15,7 +15,7 @@
}
.card-body {
flex: 1;
flex: 1 1 auto;
margin: 0;
padding: $card-spacer-y $card-spacer-x;
position: relative;
......@@ -322,7 +322,7 @@ Card tabs
}
.card-tabs-item {
flex: 1;
flex: 1 1 auto;
display: block;
padding: 1rem $card-spacer-x;
border-bottom: 1px solid $border-color;
......
src/assets/scss/dashboard/_grid.scss
浏览文件 @ 838f1eaf
......@@ -19,7 +19,7 @@
align-items: stretch;
.card {
flex: 1;
flex: 1 1 auto;
}
}
}
......
src/assets/scss/dashboard/_layout.scss
浏览文件 @ 838f1eaf
......@@ -16,7 +16,7 @@
}
.page-main {
flex: 1;
flex: 1 1 auto;
}
.page-content {
......@@ -74,7 +74,7 @@
}
.page-single {
flex: 1;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
......
src/assets/scss/dashboard/bootstrap/_media.scss
浏览文件 @ 838f1eaf
......@@ -4,5 +4,5 @@
}
.media-body {
flex: 1;
flex: 1 1 auto;
}
src/cards.html
浏览文件 @ 838f1eaf
......@@ -45,7 +45,7 @@ menu: interface.cards
{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
</div>
<div class="col-lg-6">
{% include cards/card.html title="Pannel with custom buttons" show-buttons=true %}
{% include cards/card.html title="Panel with custom buttons" show-buttons=true %}
</div>
<div class="col-lg-6">
{% include cards/card.html title="Card with search form" show-form=true %}
......@@ -54,7 +54,7 @@ menu: interface.cards
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
</div>
<div class="col-lg-6 col-xl-4">
{% include cards/card.html title="Card with alert" alert="Adding action was failed" alert-type="danger" %}
{% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}
</div>
<div class="col-lg-6 col-xl-4">
{% include cards/card.html title="Card with switch" show-switch=true %}
......@@ -63,4 +63,4 @@ menu: interface.cards
{% include cards/card.html title="Card with loader" show-loader=true %}
</div>
</div>
</div>
\ No newline at end of file
</div>
src/index.html
浏览文件 @ 838f1eaf
......@@ -45,7 +45,7 @@ menu: index
{% include cards/chart.html height=12 title="Chart title" id="chart-pie" data="pie" %}
</div>
<div class="col-sm-4">
{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="28%" %}
{% include cards/digit.html color="red" title="New feedback" digit="62" width="28%" %}
</div>
<div class="col-sm-4">
{% include cards/digit.html color="green" title="Today profit" digit="$652" width="84%" %}
......@@ -116,4 +116,4 @@ menu: index
{% include cards/invoices.html %}
</div>
</div>
</div>
\ No newline at end of file
</div>
src/sample-cards.html
浏览文件 @ 838f1eaf
......@@ -139,7 +139,7 @@ menu: cards
{% include cards/client.html %}
{% include cards/digit.html %}
<div class="row row-deck">
<div class="col-6">{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="34%" %}</div>
<div class="col-6">{% include cards/digit.html color="red" title="New feedback" digit="62" width="34%" %}</div>
<div class="col-6">{% include cards/digit.html color="green" title="Users online" digit="76" width="32%" %}</div>
</div>
{% include cards/digit.html color="yellow" title="Profit for this month" digit="$65,256" width="85%" %}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或