Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-25 20:34:25 +04:00
Code Issues Projects Releases Wiki Activity

dropdowns

Browse Source
This commit is contained in:
codecalm
2020-02-16 20:36:29 +01:00
parent 9f10668e7b
commit 812538ad45
9 changed files with 181 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/menu.yml
+3
View File
@@ -161,6 +161,9 @@ docs:
charts:
title: Charts
url: docs/charts.html
dropdowns:
title: Dropdowns
url: docs/dropdowns.html
divider:
title: Divider
url: docs/divider.html
pages/_docs/dropdowns.md
+100
View File
@@ -0,0 +1,100 @@
---
title: Dropdowns
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
bootstrap-link: components/dropdowns
toc: true
---
## Default dropdown
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can do this:
{% capture code %}
{% include ui/dropdown-menu.html show=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown divider
Separate groups of related menu items with a divider.
{% capture code %}
{% include ui/dropdown-menu.html show=true separated=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Active state
{% capture code %}
{% include ui/dropdown-menu.html show=true active=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Disabled state
{% capture code %}
{% include ui/dropdown-menu.html show=true disabled=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown header
Add a header to label sections of actions in any dropdown menu.
{% capture code %}
{% include ui/dropdown-menu.html show=true header=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with icons
{% capture code %}
{% include ui/dropdown-menu.html show=true icons=true header=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with arrow
{% capture code %}
{% include ui/dropdown-menu.html show=true arrow=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with badge
{% capture code %}
{% include ui/dropdown-menu.html show=true badge=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with checkboxes
{% capture code %}
{% include ui/dropdown-menu.html show=true check=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
{% capture code %}
{% include ui/dropdown-menu.html show=true radio=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dark dropdown
{% capture code %}
{% include ui/dropdown-menu.html show=true dark=true header=true icons=true arrow=true %}
{% endcapture %}
{% include example.html code=code centered=true %}
## Dropdown with card content
{% capture code %}
{% include ui/button.html color="secondary" text="Button" %}
<div class="dropdown{% hide %} show{% endhide %}">
<a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
<div class="dropdown-menu dropdown-menu-card{% hide %} show position-static{% endhide %}" style="max-width: 20rem;">
{% include cards/blog-single.html type="image" %}
</div>
</div>
{% endcapture %}
{% include example.html code=code centered=true wrapper="btn-list align-items-start" %}
pages/_docs/progress.md
+1 -1
View File
@@ -1,7 +1,7 @@
---
title: Progress
description: A progress bar can be used to show a user how far along he is in a process.
bootstrap-link: components/progress/
bootstrap-link: components/progress
done: true
---
pages/_docs/typography.md
+17 -17
View File
@@ -24,23 +24,23 @@ bootstrap-link: content/typography/
### Semantic text elements
{% capture code %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
<strong>Bold</strong>{% hide %} <code class="ml-2">strong</code> <code>b</code><br/>{% endhide %}
<cite>Citation</cite>{% hide %} <code class="ml-2">cite</code><br/>{% endhide %}
<code>Hello World!</code>{% hide %} <code class="ml-2">code</code><br/>{% endhide %}
<del>Deleted</del>{% hide %} <code class="ml-2">del</code><br/>{% endhide %}
<em>Emphasis</em>{% hide %} <code class="ml-2">em</code><br/>{% endhide %}
<i>Italic</i>{% hide %} <code class="ml-2">i</code><br/>{% endhide %}
<ins>Inserted</ins>{% hide %} <code class="ml-2">ins</code><br/>{% endhide %}
<kbd>Ctrl + S</kbd>{% hide %} <code class="ml-2">kbd</code><br/>{% endhide %}
<mark>Highlighted</mark>{% hide %} <code class="ml-2">mark</code><br/>{% endhide %}
<s>Strikethrough</s{% hide %}> <code class="ml-2">s</code><br/>{% endhide %}
<samp>Sample</samp>{% hide %} <code class="ml-2">samp</code><br/>{% endhide %}
Text <sub>Subscripted</sub>{% hide %} <code class="ml-2">sub</code><br/>{% endhide %}
Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% endhide %}
<time>20:00</time>{% hide %} <code class="ml-2">time</code><br/>{% endhide %}
<u>Underline</u>{% hide %} <code class="ml-2">u</code><br/>{% endhide %}
<var>x</var> = <var>y</var> + 2{% hide %} <code class="ml-2">var</code><br/>{% endhide %}
{% endcapture %}
{% include example.html code=code %}
pages/_includes/example.html
+7 -1
View File
@@ -1,9 +1,14 @@
{% assign demo-code = code %}
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
<div class="example-content">
{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
{{ code }}
{{ demo-code }}
{% if include.columns %}</div>{% endif %}
{% if include.wrapper %}</div>{% endif %}
@@ -18,6 +23,7 @@
{% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
{% assign code = code | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}
{% assign code = code | htmlbeautifier %}
<div class="example-code">
pages/_includes/ui/dropdown-menu.html
+23 -22
View File
@@ -1,25 +1,26 @@
<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} position-relative d-inline-block{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.check or include.radio %}
{% for i in (1..3) %}
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
{% endfor %}
{% elsif include.type == 'text' %}
{% if include.check or include.radio %}
{% for i in (1..3) %}
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
{% endfor %}
{% elsif include.type == 'text' %}
{% else %}
{% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
</a>
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
{% if include.separated %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
{% endif %}
{% endif %}
{% else %}
{% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
{% if include.badge %}<span class="badge bg-green ml-auto"></span>{% endif %}
</a>
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
{% if include.separated %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
{% endif %}
{% endif %}
</div>
pages/_plugins/jekyll-tags.rb
+13
View File
@@ -3,6 +3,18 @@ require 'pathname'
module Jekyll
module Tags
class Hide < Liquid::Block
def initialize(tag_name, text, tokens)
super
@text = text
end
def render(context)
'{% hide %}' + super.to_s + '{% endhide %}'
end
end
class RemoveEmptyLines < Liquid::Block
def initialize(tag_name, text, tokens)
@@ -63,4 +75,5 @@ end
Liquid::Template.register_tag('removeemptylines', Jekyll::Tags::RemoveEmptyLines)
Liquid::Template.register_tag('card', Jekyll::Tags::CardBlock)
Liquid::Template.register_tag('docs_url', Jekyll::Tags::DocsUrl)
Liquid::Template.register_tag('hide', Jekyll::Tags::Hide)
pages/tmp.html
+7 -2
View File
@@ -4,8 +4,13 @@ menu: a.b.c
<div class="row">
<div class="col-xl-4">
<div class="card card-body">
<div class="dropdown show">
<a href="#" class="btn btn-secondary">Dropdown</a>
<div class="dropdown-menu dropdown-menu-card show">
<div class="card">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur dolore dolores, earum explicabo id temporibus veritatis. Alias amet aperiam corporis dolore eos, iste magni non omnis perferendis, quos sed.</div>
</div>
</div>
</div>
</div>
scss/ui/_dropdowns.scss
+10
View File
@@ -103,3 +103,13 @@
}
}
}
.dropdown-menu-card {
padding: 0;
border: 0;
>.card {
margin: 0;
box-shadow: none;
}
}