mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Explain tags
This commit is contained in:
Jeremy Thomas
@@ -16,7 +16,7 @@ variables:
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags %}
|
||||
{% capture tags_colors %}
|
||||
<span class="tag is-black">Black</span>
|
||||
<span class="tag is-dark">Dark</span>
|
||||
<span class="tag is-light">Light</span>
|
||||
@@ -52,8 +52,137 @@ variables:
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture is_delete %}
|
||||
<a class="tag is-delete"></a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags %}
|
||||
<div class="tags">
|
||||
<span class="tag">One</span>
|
||||
<span class="tag">Two</span>
|
||||
<span class="tag">Three</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_multiple %}
|
||||
<div class="tags">
|
||||
<span class="tag">One</span>
|
||||
<span class="tag">Two</span>
|
||||
<span class="tag">Three</span>
|
||||
<span class="tag">Four</span>
|
||||
<span class="tag">Five</span>
|
||||
<span class="tag">Six</span>
|
||||
<span class="tag">Seven</span>
|
||||
<span class="tag">Eight</span>
|
||||
<span class="tag">Nine</span>
|
||||
<span class="tag">Ten</span>
|
||||
<span class="tag">Eleven</span>
|
||||
<span class="tag">Twelve</span>
|
||||
<span class="tag">Thirteen</span>
|
||||
<span class="tag">Fourteen</span>
|
||||
<span class="tag">Fifteen</span>
|
||||
<span class="tag">Sixteen</span>
|
||||
<span class="tag">Seventeen</span>
|
||||
<span class="tag">Eighteen</span>
|
||||
<span class="tag">Nineteen</span>
|
||||
<span class="tag">Twenty</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_addons %}
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Package</span>
|
||||
<span class="tag is-primary">Bulma</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_field_addons %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">npm</span>
|
||||
<span class="tag is-info">0.5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">build</span>
|
||||
<span class="tag is-success">passing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">chat</span>
|
||||
<span class="tag is-primary">on gitter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_delete_addons %}
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Alex Smith</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
{% capture tags_blog_addons %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Technology</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">CSS</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Flexbox</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Web Design</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Open Source</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Community</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-info">Documentation</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tags</h1>
|
||||
@@ -135,7 +264,7 @@ variables:
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||
{% highlight html %}{{ tags_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -176,11 +305,23 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
{{ is_delete }}
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ is_delete }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Combinations" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can also append a <strong>delete button</strong>.
|
||||
You can append a <strong>delete button</strong>.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="field">
|
||||
@@ -207,6 +348,109 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="List of tags" %}
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.5.0</span>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ tags }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ tags_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ tags_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ tags_delete_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ tags_field_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
This can be useful for a long list of <strong>blog tags</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ tags_blog_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user