mirror of
https://github.com/tabler/tabler.git
synced 2026-08-02 08:25:32 +04:00
sidebar folded, docs refactoring
This commit is contained in:
codecalm
@@ -1,28 +0,0 @@
|
||||
- page: index
|
||||
- page: alerts
|
||||
- page: autosize
|
||||
- page: avatars
|
||||
- page: badges
|
||||
- page: breadcrumb
|
||||
- page: buttons
|
||||
- page: cards
|
||||
- page: carousel
|
||||
- page: colors
|
||||
- page: cursors
|
||||
- page: charts
|
||||
- page: divider
|
||||
- page: empty
|
||||
- page: flags
|
||||
- page: form-elements
|
||||
- page: form-helpers
|
||||
- page: input-mask
|
||||
- page: progress
|
||||
- page: ribbons
|
||||
- page: spinners
|
||||
- page: steps
|
||||
- page: tables
|
||||
- page: tabs
|
||||
- page: timelines
|
||||
- page: toasts
|
||||
- page: tooltips
|
||||
- page: typography
|
||||
|
||||
+90
-1
@@ -2,12 +2,15 @@ home:
|
||||
url: index.html
|
||||
title: Dashboard
|
||||
icon: home
|
||||
badge: ''
|
||||
badge-color: blue
|
||||
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Form elements
|
||||
icon: check-square
|
||||
badge: New
|
||||
badge-color: red
|
||||
|
||||
base:
|
||||
title: Base
|
||||
@@ -57,7 +60,93 @@ docs:
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
url: docs/index.html
|
||||
docs: true
|
||||
children:
|
||||
index:
|
||||
title: index
|
||||
url: docs/index.html
|
||||
alerts:
|
||||
title: Alerts
|
||||
url: docs/alerts.html
|
||||
autosize:
|
||||
title: Autosize
|
||||
url: docs/autosize.html
|
||||
avatars:
|
||||
title: Avatars
|
||||
url: docs/avatars.html
|
||||
badges:
|
||||
title: Badges
|
||||
url: docs/badges.html
|
||||
breadcrumb:
|
||||
title: Breadcrumb
|
||||
url: docs/breadcrumb.html
|
||||
buttons:
|
||||
title: Buttons
|
||||
url: docs/buttons.html
|
||||
cards:
|
||||
title: Cards
|
||||
url: docs/cards.html
|
||||
carousel:
|
||||
title: Carousel
|
||||
url: docs/carousel.html
|
||||
colors:
|
||||
title: Colors
|
||||
url: docs/colors.html
|
||||
cursors:
|
||||
title: Cursors
|
||||
url: docs/cursors.html
|
||||
charts:
|
||||
title: Charts
|
||||
url: docs/charts.html
|
||||
divider:
|
||||
title: Divider
|
||||
url: docs/divider.html
|
||||
empty:
|
||||
title: Empty states
|
||||
url: docs/empty.html
|
||||
flags:
|
||||
title: Flags
|
||||
url: docs/flags.html
|
||||
form-elements:
|
||||
title: Form elements
|
||||
url: docs/form-elements.html
|
||||
form-helpers:
|
||||
title: Form helpers
|
||||
url: docs/form-helpers.html
|
||||
input-mask:
|
||||
title: Form input mask
|
||||
url: docs/input-mask.html
|
||||
progress:
|
||||
title: Progress
|
||||
url: docs/progress.html
|
||||
ribbons:
|
||||
title: Ribbons
|
||||
badge: New
|
||||
url: docs/ribbons.html
|
||||
spinners:
|
||||
title: Spinners
|
||||
url: docs/spinners.html
|
||||
steps:
|
||||
title: Steps
|
||||
url: docs/steps.html
|
||||
tables:
|
||||
title: Tables
|
||||
url: docs/tables.html
|
||||
tabs:
|
||||
title: Tabs
|
||||
url: docs/tabs.html
|
||||
timelines:
|
||||
title: Timelines
|
||||
url: docs/timelines.html
|
||||
toasts:
|
||||
title: Toasts
|
||||
url: docs/toasts.html
|
||||
tooltips:
|
||||
title: Tooltips
|
||||
url: docs/tooltips.html
|
||||
typography:
|
||||
title: Typography
|
||||
url: docs/typography.html
|
||||
|
||||
|
||||
#changelog:
|
||||
# url: changelog.html
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Alerts
|
||||
menu: docs.alerts
|
||||
description: Bootstrap provides an easy way to create predefined alert messages.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/alerts/
|
||||
bootstrap-link: components/alerts/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Badges
|
||||
menu: docs.badges
|
||||
description: A small count and labeling component.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/
|
||||
bootstrap-link: components/badge/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Breadcrumb
|
||||
menu: docs.breadcrumb
|
||||
description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/breadcrumb/
|
||||
bootstrap-link: components/breadcrumb/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Buttons
|
||||
icon: fe fe-plus-square
|
||||
description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/
|
||||
bootstrap-link: components/buttons/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Cards
|
||||
menu: docs.cards
|
||||
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/
|
||||
bootstrap-link: components/card/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Carousel
|
||||
menu: docs.carousel
|
||||
description: The Carousel is a slideshow for cycling through elements.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/carousel/
|
||||
bootstrap-link: components/carousel/
|
||||
---
|
||||
|
||||
{% example html columns=1 %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Colors
|
||||
menu: docs.colors
|
||||
description:
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
|
||||
bootstrap-link: utilities/colors/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
description: A divider visually segments content into groups
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers
|
||||
bootstrap-link: components/dropdowns/#dividers
|
||||
done: true
|
||||
---
|
||||
### Default markup
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Form Elements
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/
|
||||
bootstrap-link: components/forms/
|
||||
---
|
||||
|
||||
### Classic Input
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Progress
|
||||
description: A progress bar can be used to show a user how far along he is in a process.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/progress/
|
||||
bootstrap-link: components/progress/
|
||||
done: true
|
||||
---
|
||||
|
||||
### Default markup
|
||||
@@ -49,5 +50,8 @@ You can also use native HTML5 `<progress>` element.
|
||||
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example %}
|
||||
{% include ui/progress.html size="sm" color="purple"%}
|
||||
{% endexample %}
|
||||
{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %}
|
||||
{% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %}
|
||||
{% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %}
|
||||
{% include ui/progress.html size="sm" color="pink" %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Ribbons
|
||||
menu: docs.ribbons
|
||||
new: true
|
||||
done: true
|
||||
---
|
||||
|
||||
### Default markup
|
||||
@@ -14,10 +14,10 @@ new: true
|
||||
|
||||
You can easily change the position of a ribbon by adding a class to the element.
|
||||
|
||||
`ribbon-top` - moves it to the top
|
||||
`ribbon-right` - moves it to the right
|
||||
`ribbon-bottom` - moves it to the bottom
|
||||
`ribbon-left` - moves it to the lefg
|
||||
- `ribbon-top` - moves it to the top
|
||||
- `ribbon-right` - moves it to the right
|
||||
- `ribbon-bottom` - moves it to the bottom
|
||||
- `ribbon-left` - moves it to the lefg
|
||||
|
||||
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Spinners
|
||||
menu: docs.spinners
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/
|
||||
bootstrap-link: components/spinners/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tables
|
||||
menu: docs.tables
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/
|
||||
bootstrap-link: content/tables/
|
||||
---
|
||||
|
||||
### Basic Table
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tabs
|
||||
menu: docs.tabs
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/
|
||||
bootstrap-link: components/navs/
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Toasts
|
||||
menu: docs.toasts
|
||||
description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/
|
||||
bootstrap-link: components/toasts/
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Tooltips
|
||||
menu: docs.tooltips
|
||||
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/
|
||||
bootstrap-link: components/tooltips/
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Typography
|
||||
menu: docs.typography
|
||||
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/
|
||||
bootstrap-link: content/typography/
|
||||
---
|
||||
|
||||
### Headings
|
||||
|
||||
@@ -5,13 +5,19 @@
|
||||
{% for level-1 in site.data.menu %}
|
||||
<li class="sidebar-nav-item">
|
||||
|
||||
<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}">
|
||||
<a href="{{ site.base }}/{{ level-1[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}">
|
||||
{% if level-1[1].icon %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
{% include ui/icon.html icon=icon %}
|
||||
{% include ui/icon.html icon=icon class="nav-icon" %}
|
||||
{% endif %}
|
||||
|
||||
<span>{{ level-1[1].title }}</span>
|
||||
<span class="nav-text">{{ level-1[1].title }}</span>
|
||||
|
||||
{% if level-1[1].badge %}
|
||||
{% assign badge = level-1[1].badge %}
|
||||
{% assign badge-color = level-1[1].badge-color | default: 'green' %}
|
||||
{% include ui/badge.html text=badge color=badge-color %}
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{% comment %}
|
||||
@@ -19,7 +25,7 @@
|
||||
{% endcomment %}
|
||||
|
||||
{% if level-1[1].children %}
|
||||
<ul>
|
||||
<ul class="sidebar-subnav">
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<li class="sidebar-nav-item">
|
||||
<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}">
|
||||
|
||||
@@ -1 +1 @@
|
||||
<span class="badge bg-{{ include.color }}">{{ include.text }}</span>
|
||||
<span class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text }}</span>
|
||||
|
||||
@@ -5,6 +5,7 @@ title: Documentation
|
||||
page-title: Documentation
|
||||
---
|
||||
|
||||
{% assign current-url = page.url | replace_regex: "^/", "" %}
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-3 order-lg-1 mb-4">
|
||||
@@ -13,11 +14,21 @@ page-title: Documentation
|
||||
</a>
|
||||
|
||||
<div class="list-group list-group-transparent mb-0">
|
||||
{% for p in site.data.docs %}
|
||||
{% assign doc = site.docs | where: "slug", p.page | first %}
|
||||
<a href="{{ site.base }}{{ doc.url | relative_url }}"
|
||||
class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
|
||||
{{ doc.title }}{% if doc.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
|
||||
{% for doc in site.data.menu.docs.children %}
|
||||
{% assign key = doc[0] %}
|
||||
<a href="{{ site.base }}{{ doc[1].url | relative_url }}" class="list-group-item list-group-item-action{% if current-url == doc[1].url %} active{% endif %}">
|
||||
|
||||
{% if jekyll.environment == 'development' %}
|
||||
{% assign doc-page = site.docs | where: "slug", key | first %}
|
||||
{% if doc-page.done %}{% include_cached ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{{ doc[1].title }}
|
||||
|
||||
{% if doc[1].badge %}
|
||||
{% assign badge = doc[1].badge %}
|
||||
{% include ui/badge.html text=badge color="green" class="ml-auto" %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -29,7 +40,7 @@ page-title: Documentation
|
||||
<div class="markdown">
|
||||
{% if page.bootstrap-link %}
|
||||
<p class="mb-4 float-right">
|
||||
<a href="{{ page.bootstrap-link }}" target="_blank">
|
||||
<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
|
||||
{% include_cached ui/icon.html icon="external-link" color="blue" class="pr-1" %}
|
||||
Bootstrap documentation
|
||||
</a>
|
||||
@@ -40,8 +51,6 @@ page-title: Documentation
|
||||
{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
{% if page.plugin %}
|
||||
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
|
||||
plugin.
|
||||
|
||||
@@ -4,6 +4,7 @@ page-title: Dashboard
|
||||
page-pretitle: Overview
|
||||
page-title-actions: buttons
|
||||
site-layout: layout-collapsed-md
|
||||
menu-layout: vertical
|
||||
menu: home
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user