bladewindUI
Tags, sometimes referred to as labels allow you to logically group items or indicate statuses of items. You can also use tags to list selections. They are very simple to use.
<x-bladewind.tag label="pending" />
The BladewindUI tag component allows you to specify different colours. The tags by default are faint in colour with blue being the default colour. There are nine colour options to pick from.
<x-bladewind.tag label="pending" color="red" />
<x-bladewind.tag label="pending" color="yellow" />
<x-bladewind.tag label="pending" color="green" />
<x-bladewind.tag label="pending" color="blue" />
<x-bladewind.tag label="pending" color="pink" />
<x-bladewind.tag label="pending" color="cyan" />
<x-bladewind.tag label="pending" color="orange" />
<x-bladewind.tag label="pending" color="gray" />
<x-bladewind.tag label="pending" color="purple" />
Dark colours in this case have nothing to do with dark mode. These are just a deeper shade of the tag colours. You can get darker shaded tags by setting shade="dark"
<x-bladewind.tag label="pending" shade="dark" color="red" />
<x-bladewind.tag label="pending" shade="dark" color="yellow" />
<x-bladewind.tag label="pending" shade="dark" color="green" />
<x-bladewind.tag label="pending" shade="dark" color="blue" />
<x-bladewind.tag label="pending" shade="dark" color="pink" />
<x-bladewind.tag label="pending" shade="dark" color="cyan" />
<x-bladewind.tag label="pending" shade="dark" color="orange" />
<x-bladewind.tag label="pending" shade="dark" color="gray" />
<x-bladewind.tag label="pending" shade="dark" color="purple" />
Tags can also have close icons. That will be useful if you use tags to display user selections and want a way to remove a user’s selection from the list. By default tags do not show the close icon.
To activate close icons, set can_close="true"
. The default action when the close icon is clicked is to remove the tag that was clicked.
<x-bladewind.tag label="pending"
can_close="true" />
<x-bladewind.tag label="pending"
can_close="true"
color="pink" />
The default action when the close icon is clicked is to remove the tag that was clicked.
To run your own code when the close icon is clicked, provide a javascript function to the onclick
attribute.
You may need to use the id
attribute to provide unique identifiers for your tags.
By default each tag has a random generated id
prefixed with bw-
to prevent numeric only IDs from breaking.
You can turn off the prefixing of IDs by setting add_id_prefix="false"
<x-bladewind.tag
label="marketing"
can_close="true"
add_id_prefix="false"
id="a1001"
onclick="alert('you clicked on '+ dom_el('#a1001').innerText)" />
<x-bladewind.tag
label="accounting"
can_close="true"
color="pink"
class="a1002"
onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />
The table below shows a comprehensive list of all the attributes available for the Tag component.
Option | Default | Available Values |
---|---|---|
label | blank | The text to display on the tag. |
color | blue |
There are nine colors to choose from. red yellow green blue pink
cyan purple gray orange
|
shade | faint | Determines if the tags should have a faint or darker color shade. faint dark |
can_close | false | Determines if the tag should display a close icon or not. The value should be passed as a string, not boolean.true false |
id | uniqid() | Unique id for the tag. This id can then be accessed via javascript. By default tag IDs have a prefix of bw- |
add_id_prefix | true | Determines if the bw- prefix should be added to tag IDs. true false |
onclick | blank | Javascript function to execute when the close icon is clicked. |
class | bw-tag | Any additional CSS you wish to add. |
<x-bladewind.tag
label="accounting"
can_close="true"
color="pink"
class="a1002"
id="a1002"
add_id_prefix="false"
shade="dark"
onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />
resources > views > components > bladewind > tag.blade.php