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

bottom cards component

Browse Source
This commit is contained in:
codecalm
2019-10-07 22:17:22 +02:00
parent d60850af7d
commit 9eaf5c27a2
5 changed files with 66 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/_components/card-tabs-bottom.md Normal file
View File

@@ -0,0 +1,6 @@
---
title: Card with bottom tabs
columns: 2
---
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}

52
pages/_includes/cards/card-tabs.html
View File

@@ -1,21 +1,39 @@
{% assign tabs = (1..3) %}
{% assign tabs-count = include.count | default: 3 %}
{% assign id = include.id | default: 'top' %}
{% assign tabs = (1..tabs-count) %}
<div class="card-tabs">
<ul class="nav nav-tabs">
{% for tab in tabs %}
<li class="nav-item"><a href="#tab-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li>
{% endfor %}
</ul>
<div class="tab-content">
{% for tab in tabs %}
<div id="tab-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div class="card-body">
<div class="card-title">Content of tab #{{ tab }}</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
{% capture tabs-html %}
<!-- Cards navigation -->
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
{% for tab in tabs %}
<li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li>
{% endfor %}
</ul>
{% endcapture %}
{% capture tabs-content-html %}
<div class="tab-content">
{% for tab in tabs %}
<!-- Content of card #{{ tab }} -->
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div class="card-body">
<div class="card-title">Content of tab #{{ tab }}</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endcapture %}
<!-- Cards with tabs component -->
<div class="card-tabs">
{% if include.bottom %}
{{ tabs-content-html }}
{{ tabs-html }}
{% else %}
{{ tabs-html }}
{{ tabs-content-html }}
{% endif %}
</div>

3
pages/_layouts/component.html
View File

@@ -9,7 +9,8 @@ page-title: Tabler components
<div class="row">
<div class="col-lg-3">
<div class="list-group list-group-transparent mb-0">
{% for component in site.components %}
{% assign components = site.components | sort: title %}
{% for component in components %}
<a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
{% endfor %}
</div>

4
pages/cards.html
View File

@@ -15,8 +15,8 @@ page-title: Cards
{% include_cached cards/card.html header-pills=true %}
{% include_cached cards/card.html progress=true title="Card with progress bar" %}
{% include_cached cards/card.html empty=true %}
{% include cards/card-tabs.html %}
{% include cards/card-tabs.html count=4 %}
{% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
</div>
<div class="col-md-6 col-xl-8">
{% include_cached cards/card-image.html title="Card with left side image" %}

23
scss/ui/_cards.scss
View File

@@ -338,9 +338,10 @@ Card list group
Card tabs
*/
.card-tabs {
margin-bottom: $card-group-margin;
.nav-tabs {
border-bottom-color: transparent;
margin-bottom: -1px;
border-bottom: 0;
z-index: $zindex-dropdown;
position: relative;
@@ -380,7 +381,25 @@ Card tabs
}
}
.nav-tabs-bottom {
margin-bottom: 0;
.nav-item {
margin-top: -1px;
margin-bottom: 0;
.nav-link {
border-bottom: $card-border-width solid $card-border-color;
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
.card {
border-top-left-radius: 0;
margin: 0;
}
}