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

new: Datagrid compontent (#1118)

Browse Source
This commit is contained in:
Paweł Kuna
2022-05-08 15:09:37 +02:00
committed by GitHub
parent 8fac4440ae
commit 3872d48492
9 changed files with 129 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/_data/docs.yml
View File

@@ -93,6 +93,9 @@ components:
carousel:
title: Carousel
url: docs/carousel.html
datagrid:
title: Data grid
url: docs/datagrid.html
dropdowns:
title: Dropdowns
url: docs/dropdowns.html

4
src/pages/_data/menu.yml
View File

@@ -37,6 +37,10 @@ base:
colors:
url: colors.html
title: Colors
datagrid:
url: datagrid.html
title: Data grid
badge: New
datatables:
url: datatables.html
title: Datatables

10
src/pages/_docs/datagrid.md Normal file
View File

@@ -0,0 +1,10 @@
---
title: Data grid
menu: docs.components.datagrid
description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
---
{% capture code %}
{% include parts/datagrid.html %}
{% endcapture %}
{% include example.html code=code wrapper="demo-dividers" %}

72
src/pages/_includes/parts/datagrid.html Normal file
View File

@@ -0,0 +1,72 @@
<div class="datagrid">
<div class="datagrid-item">
<div class="datagrid-title">Registrar</div>
<div class="datagrid-content">Third Party</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Nameservers</div>
<div class="datagrid-content">Third Party</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Port number</div>
<div class="datagrid-content">3306</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Expiration date</div>
<div class="datagrid-content">–</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Creator</div>
<div class="datagrid-content">
{% assign creator = site.data.people[0] %}
<div class="d-flex align-items-center">
{% include ui/avatar.html person=creator rounded=true size="xs" class="me-2" %}
{{ creator.full_name }}
</div>
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Age</div>
<div class="datagrid-content">15 days</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Edge network</div>
<div class="datagrid-content">
{% include ui/status.html text="Active" color="green" %}
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Avatars list</div>
<div class="datagrid-content">
{% include ui/avatar-list.html stacked=true text="+3" size="xs" %}
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Checkbox</div>
<div class="datagrid-content">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked>
<span class="form-check-label">Click me</span>
</label>
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Icon</div>
<div class="datagrid-content">
{% include ui/icon.html icon="check" color="green" %}
Checked
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Form control</div>
<div class="datagrid-content">
<input type="text" class="form-control form-control-flush" placeholder="Input placeholder">
</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">Longer description</div>
<div class="datagrid-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>

14
src/pages/datagrid.html Normal file
View File

@@ -0,0 +1,14 @@
---
title: Data grid
page-header: Data grid
menu: base.datagrid
---
<div class="card">
<div class="card-header">
<h3 class="card-title">Base info</h3>
</div>
<div class="card-body">
{% include parts/datagrid.html %}
</div>
</div>

1
src/scss/_core.scss
View File

@@ -20,6 +20,7 @@
@import "ui/cards";
@import "ui/close";
@import "ui/dropdowns";
@import "ui/datagrid";
@import "ui/empty";
@import "ui/grid";
@import "ui/icons";

6
src/scss/_variables.scss
View File

@@ -395,11 +395,14 @@ $carousel-indicator-thumb-width: 4rem !default;
$carousel-indicator-dot-width: .5rem !default;
//close
$btn-close-width: .75rem !default;
$btn-close-opacity: .3 !default;
// datagrid
$datagrid-padding: 1.5rem !default;
$datagrid-item-width: 15rem !default;
//dropdown
$dropdown-item-padding-x: .75rem !default;
$dropdown-item-padding-y: .5rem !default;
@@ -530,6 +533,7 @@ $pagination-disabled-color: rgba($text-muted, .5) !default;
//statuses
$status-dot-size: .5rem !default;
$status-height: 1.5rem !default;
//steps
$steps-border-width: 2px !default;

17
src/scss/ui/_datagrid.scss Normal file
View File

@@ -0,0 +1,17 @@
//
// Base styles
//
.datagrid {
--#{$variable-prefix}datagrid-padding: #{$datagrid-padding};
--#{$variable-prefix}datagrid-item-width: #{$datagrid-item-width};
display: grid;
grid-gap: var(--#{$variable-prefix}datagrid-padding);
grid-template-columns: repeat(auto-fit, minmax(var(--#{$variable-prefix}datagrid-item-width), 1fr));
}
.datagrid-title {
@include subheader;
margin-bottom: .25rem;
}

5
src/scss/ui/_status.scss
View File

@@ -40,13 +40,14 @@
// Status
//
.status {
--#{$variable-prefix}status-height: #{$status-height};
--#{$variable-prefix}status-color: #{$text-muted};
--#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
display: inline-flex;
align-items: center;
height: 2rem;
padding: .5rem .75rem;
height: var(--#{$variable-prefix}status-height);
padding: .25rem .75rem;
gap: .5rem;
color: var(--#{$variable-prefix}status-color);
background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);