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"> {% capture tabs-html %}
<ul class="nav nav-tabs"> <!-- Cards navigation -->
{% for tab in tabs %} <ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
<li class="nav-item"><a href="#tab-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li> {% for tab in tabs %}
{% endfor %} <li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab">Tab {{ tab }}</a></li>
</ul> {% endfor %}
<div class="tab-content"> </ul>
{% for tab in tabs %} {% endcapture %}
<div id="tab-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div class="card-body"> {% capture tabs-content-html %}
<div class="card-title">Content of tab #{{ tab }}</div> <div class="tab-content">
<p> {% for tab in tabs %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. <!-- Content of card #{{ tab }} -->
</p> <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
</div> <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> </div>
{% endfor %}
</div> </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> </div>

3
pages/_layouts/component.html
View File

@@ -9,7 +9,8 @@ page-title: Tabler components
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<div class="list-group list-group-transparent mb-0"> <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> <a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
{% endfor %} {% endfor %}
</div> </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 header-pills=true %}
{% include_cached cards/card.html progress=true title="Card with progress bar" %} {% include_cached cards/card.html progress=true title="Card with progress bar" %}
{% include_cached cards/card.html empty=true %} {% include_cached cards/card.html empty=true %}
{% include cards/card-tabs.html count=4 %}
{% include cards/card-tabs.html %} {% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
</div> </div>
<div class="col-md-6 col-xl-8"> <div class="col-md-6 col-xl-8">
{% include_cached cards/card-image.html title="Card with left side image" %} {% 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
*/ */
.card-tabs { .card-tabs {
margin-bottom: $card-group-margin;
.nav-tabs { .nav-tabs {
border-bottom-color: transparent; border-bottom: 0;
margin-bottom: -1px;
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
position: relative; 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 { .card {
border-top-left-radius: 0; border-top-left-radius: 0;
margin: 0;
} }
} }