Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

feat: Add card gradients page and gradient card components (#2554)

Browse Source
This commit is contained in:
Paweł Kuna
2025-11-29 11:58:51 +01:00
committed by GitHub
parent deb887b4aa
commit ec9469332e
29 changed files with 487 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
preview/pages/card-gradients.html Normal file
View File

@@ -0,0 +1,97 @@
---
title: Card Gradients
page-header: Card Gradients
page-menu: base.cards.gradients
layout: default
permalink: card-gradients.html
page-libs: [apexcharts]
---
{% assign gradients = 'sunset,rainbow,ocean,mellow,disco,psychedelic' | split: ',' %}
<div class="row row-cards">
<div class="col-md-6">
<div class="row row-cards">
<div class="col-12">
{% include "cards/welcome.html" %}
</div>
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="row row-cards">
<div class="col-12">
{% include "cards/delete-confirm.html" %}
</div>
<div class="col-12">
{% include "cards/success-message.html" %}
</div>
</div>
</div>
<div class="col-6">
<div class="row row-cards">
<div class="col-12">
{% include "cards/pricing-plan.html" %}
</div>
<div class="col-12">
{% include "cards/stat-gradient.html" title="Earned" value="$2,847" icon="credit-card" color="success"
progress=75 %}
</div>
<div class="col-12">
{% include "cards/stat-gradient.html" title="Pending Orders" value="47" icon="clock" color="yellow"
progress=38 %}
</div>
<div class="col-12">
{% include "cards/stat-gradient.html" title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red"
progress=8 %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="row row-cards">
<div class="col-12">
{% include "cards/happy-birthday.html" %}
</div>
<div class="col-12">
{% include "cards/you-win.html" %}
</div>
</div>
</div>
<div class="col-3">
<div class="row row-cards">
<div class="col-12">
{% include "cards/weather.html" city="Warsaw, PL" temperature=3 color="rain" icon="cloud-rain"
description="Cloudy morning" %}
</div>
<div class="col-12">
{% include "cards/weather.html" city="Oslo, NO" temperature="-5" color="snow" icon="cloud"
description="Snowy day" %}
</div>
<div class="col-12">
{% include "cards/weather.html" city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny
day" %}
</div>
<div class="col-12">
{% include "cards/profile-contact.html" person=people[6] %}
</div>
<div class="col-12">
{% include "cards/small-stats.html" chart-type="line" chart-data="11,16,13,20,17,24,19,23,16,20,13,17,11,19"
color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" %}
</div>
<div class="col-12">
{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" title="$5,256.99"
description="Revenue last 30 days" description-value="+4%" class="card-gradient card-gradient-end
card-gradient-green" %}
</div>
<div class="col-12">
{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" title="342" description="Sales
last 30 days" description-value="-4.3%" description-value-color="red" class="card-gradient card-gradient-end
card-gradient-red" %}
</div>
</div>
</div>
</div>

12
preview/pages/charts.html
View File

@@ -13,17 +13,7 @@ permalink: charts.html
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ms-auto">
{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
</div>
</div>
{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
</div>
</div>
{% include "cards/charts/social-referrals.html" %}
</div>
<div class="col-12">