Tags in JTB_MD meticulously designed to fulfill your project's categorization requirements. With their compact and interactive design, Tags provide a seamless solution for effortlessly labeling and organizing elements as needed in your projects.

How to use

In JTB_MD, there are two different ways to create and use a tag element in your project:

Creating the element via HTML directly,
Creating tag via jtbTag plugin.

To create a tag element via HTML, you just need to create a container element (preferably <span>) and add .jtbTag class into it. (We will explain the plugin method later on this page.)

Example

                <!-- Default Tag -->
<span class='jtbTag'>Example</span>

Tags in JTB_MD support all content in either plain text or HTML format. However, there is an important consideration when supplying content:

In JTB_MD, tags are elements that uses flexbox as their base technology, which means that if you provide content in a format where HTML elements are mixed with plain text, it automatically attempts to arrange them based on it. To avoid this issue, it is highly advisable to wrap all your content with a <span> element if you need to disable the flex features of tag elements.

Hello, Mixed

                <!-- Mixed -> Wrapped with span to disable flex features -->
<span class='jtbTag'><span>Hello, <b>Mixed</b></span></span>

Closable

To make your tag closable, you can add .jtbTag-closable class to your tag element.

Example

                    <!-- Closable Tag -->
<span class='jtbTag jtbTag-closable'>...</span>

Selectable

To make your tag selectable, you can add .jtbTag-selectable class to your tag element.

Selecting a tag assignes it .active class. To set a tag as selected by default, include the .active class during the tag creation process.

Not selectable Selectable Active

                    <!-- Selectable Tag -->
<span class='jtbTag jtbTag-selectable'>...</span>

<!-- Selected Tag -->
<span class='jtbTag jtbTag-selectable active'>...</span>

Disabling

To disable a tag in the JTB_MD library, simply add the .disabled class to your element.

Disabled

                    <!-- Disabled Tag -->
<span class='jtbTag jtbTag-selectable disabled'>...</span>

Icon usage

Thanks to flex structure of tags, there is no additional thing to do while adding icons to your tag elements. The library automatically detects the content and adjusts them for you.

Atom

                    <!-- Tag With Icon -->
<span class='jtbTag'>
    <i class='...'></i> Atom
</span>

Versions

Within JTB_MD, the tag component comes in two distinctive versions:

Default Version: This is the standard version of tags, designed with a background to ensure your messages stand out prominently.
Inverse Version: In this alternative version, the tag is rendered with a transparent background, providing a sleek and modern appearance.

Regardless of the version you choose, the usage remains consistent. To implement the inverse version, simply apply the .jtbTag-inverse class to your .jtbTag element.

Default Inverse

                <!-- Default Tag -->
<span class='jtbTag'>...</span>

<!-- Inverse Tag -->
<span class='jtbTag jtbTag-inverse'>...</span>

Styling

As you've learned how to create and use tags, let's now explore how to enhance the visual appeal of your elements using pre-defined JTB_MD tag classes.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within tags have been crafted to simplify your design workflow.

Colors

JTB_MD enables you to utilize the predefined colors outlined in the Colors section for your tag elements. To do so, simply apply the desired color class to your tag:

purpleblueaquagreenlimeyelloworangevolcanored

                            <!-- Example colorful tag (Orange) -->
<span class='jtbTag jtbTag-orange'>...</span>

Sizes

In JTB_MD, you can also resize your tag elements. To make your tags larger or smaller than the default, simply apply the relevant size-class to your element.

.jtbTag-[ xs | sm | md | lg | xl ]

xssmmdlgxl

                            <!-- Example sized tag (size = xs) -->
<span class='jtbTag jtbTag-xs'>...</span>

Removing Borders

To create a borderless tag element, simply apply the .jtbTag-borderless class.

Borderless

                    <!-- Borderless Tag -->
<span class='jtbTag jtbTag-borderless'>...</span>

Rectangular

To create a rectangular tag (with no border radius), apply the .jtbTag-rect class to your tag element.

Rectangular

                    <!-- Rectangular Tag -->
<span class='jtbTag jtbTag-rect'>...</span>

Rounded

To create a rounded (pill shaped) tag, apply the .jtbTag-rounded class to your tag element.

Rounded

                    <!-- Rounded Tag -->
<span class='jtbTag jtbTag-rounded'>...</span>

Javascript Plugin

In JTB_MD, the actions and methods that tags can perform are defined in the jtbTag plugin. Ensure that you haven't manually removed it from your project to utilize its functionalities properly.

For detailed information on plugins, refer to the JavaScript section.

Methods

With the jtbTag plugin integrated, you can effortlessly generate and manipulate tags on-the-fly in your project using JavaScript.

If you prefer to avoid traditional methods, such as creating elements directly in HTML, the following methods will be your best companions.

Create

To dynamically create a tag, use the jtbTag() function with create method and your desired parameters. The format is $(container).jtbTag('create', { parameters }, callbackFunction); where:

$(container) represents the element in which the tag will be placed,
parameters represents the object that holds tag's details such as content and classes,
callbackFunction (optional) stands for the function that you want to call after the creation of your tag element.

When creating a tag using plugin, the method returns the freshly created tag element. You can assign it to a variable for further use.

                        <!-- Define Container -->
<div id='createHere'></div>

<!-- Assign Function to Button -->
<button class='jtbButton' onclick='createTag()'>Create Tag</button>

<!-- Function to Create Tag -->
<script type='text/javascript'>
    function createTag() {
        $('#createHere').jtbTag('create', {
            html: "Hello!",
            classes: "jtbTag-rounded jtbTag-purple jtbMR-0_5",
            // Additional parameters goes here
        });
    }
</script>

For a personalized touch that aligns with your project's design, you can customize the parameters of the jtbTag() function as outlined below:

Category	Name	Type	Default Value	Description	Example Usage
Identifiers	id	`String`	""	ID of the tag element. If not specified the system automatically fills it.	`"myTagID"`
Identifiers	classes	`String`	""	Classes to be applied to tag element.	`"jtbTag-lg jtbTag-rect"`
Content	html	`String`	""	Content to be displayed in tag as HTML or plain-text. To disable flex adjustments, wrap your whole content with a `<span>` element.	`"Example tag"`
Design	css	`String`	""	Additional CSS codes to style tag element.	`"font-size:1rem; color:blue;"`
Design	disabled	`Boolean`	false	State of element.	`true`
Listeners	animSpeed	`Integer`	300	Speed of animations for methods.	`1000`
	onUpdate	`String`	""	Function that will be called after 'update' method.	`"myCustomFunc('param1');"`
	onSelect	`String`	""	Function that will be called after 'select' method.	`"myCustomFunc('param1');"`
	onDeselect	`String`	""	Function that will be called after 'deselect' method.	`"myCustomFunc('param1');"`
	onShow	`String`	""	Function that will be called after 'show' method.	`"myCustomFunc('param1');"`
	onHide	`String`	""	Function that will be called after 'hide' method.	`"myCustomFunc('param1');"`
	onToggle	`String`	""	Function that will be called after 'toggle' method.	`"myCustomFunc('param1');"`
	onDestroy	`String`	""	Function that will be called after 'destroy' method.	`"myCustomFunc('param1');"`

Update

After creating a tag element, if you wish to modify any of its defined parameters, you can invoke the jtbTag() function with update method and your new values.

At this point we need to state that the update method needs to be linked directly to tag element that you want to update instead of the container that holds the tag. The defined format for update is: $(tag).jtbTag('update', { parameters }, callbackFunction); where:

$(tag) represents the tag element that you want to update,
parameters represents the object that holds tag's details such as content and classes,
callbackFunction (optional) stands for the function that you want to call after the update action.

Example

                        /*----- Update the tag element -----*/
$('#tagID').jtbTag('update', {
    // Parameters goes here
});

Show

To make a specific tag visible on your DOM, you can invoke the plugin with the "show" parameter. Unlike the previous two methods, show method has no attribute as parameters. So you can trigger the method as: $(tag).jtbTag('show', callbackFunction); where:

$(tag) represents the tag element that you want to make visible,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Show hidden tags -----*/
$("#tagID").jtbTag("show");

Hide

To hide a specific tag on your DOM, utilize the jtbTag() function with the "hide" parameter. Like the "show" method, "hide" has no attribute as parameters. So you can trigger the method as: $(tag).jtbTag('hide', callbackFunction); where:

$(tag) represents the tag element that you want to make hidden,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

Hide me pls

                        /*----- To Hide tags -----*/
$("#tagID").jtbTag("hide");

Toggle

To toggle visibility of a specific tag on your DOM (hide if visible and make it visible if hidden), utilize the jtbTag() function with the "toggle" parameter. Like the previous two methods, "toggle" has no attribute as parameters. So you can trigger the method as: $(tag).jtbTag('toggle', callbackFunction); where:

$(tag) represents the tag element that you want to toggle visibility,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

Hehe

                        /*----- To Change visibility of tag -----*/
$("#tagID").jtbTag("toggle");

Destroy

To permanently remove your tag element from the DOM, use the jtbTag() function with the "destroy" parameter. Please be aware that after destruction, the element is completely removed from the HTML code and cannot be restored. You can trigger the "destroy" method as: $(tag).jtbTag('destroy', callbackFunction); where:

$(tag) represents the tag element that you want to destroy,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

Destroy me, uWu

                        /*----- To remove a tag completely -----*/
$("#tagID").jtbTag("destroy");

Select

To set a tag element as selected in the DOM, use the jtbTag() function with the "select" parameter. You can trigger the "select" method as: $(tag).jtbTag('select', callbackFunction); where:

$(tag) represents the tag element that you want to destroy,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

I'm selectable

                        /*----- To set a tag as selected -----*/
$("#tagID").jtbTag("select");

Deselect

To set a tag element as de-selected in the DOM, use the jtbTag() function with the "deselect" parameter. You can trigger the "deselect" method as: $(tag).jtbTag('deselect', callbackFunction); where:

$(tag) represents the tag element that you want to destroy,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

I'm already selected

                        /*----- To set a tag as de-selected -----*/
$("#tagID").jtbTag("deselect");

Callbacks

Throughout the process of creating tags and using methods via the plugin, you can execute additional functions after the operation by providing additional parameter to the jtbTag() function.

The jtbTag plugin offers three ways to specify a callback function. Since one of them is defining the listeners for element as attributes on their html tags such as onUpdate="console.log('updated');" and you've already saw that we do not go over them again. Here are the two additional methods:

Create a function elsewhere and call it inside jtbTag().

I'm a tag

                    /*-----  Toggle Tag and callback -----*/
$("#tagID").jtbTag("toggle", showProcessDone);

/*------ Define showProcessDone in here -------*/
function showProcessDone(){
	alert('Process done boss.');
}

Define the function itself inside jtbTag().

I'm a tag

                    /*----- Toggle tag and callback -----*/
$("#tagID").jtbTag("toggle", function(){
	alert("Process done boss.");
});

The closing actions of tags in JTB_MD triggers jtbTag plugin's destroy method. So if you define onDestroy attribute to your tag element, it automatically calls defined function when a user closes the tag.

Close me

                    <!-- Closable Tag with onDestroy Attribute -->
<span class='jtbTag jtbTag-jtbTag-purple jtbTag-closable' onDestroy='showProcessDone();'>...</div>

<script type='text/javascript'>
	/*----- Defining Function In Here ------*/
		function showProcessDone(){
			alert('Process done boss.');
		}
</script>

Similar to closing actions, selecting a tag triggers the select method of the element, working in conjunction with the onSelect attribute; conversely, deselecting a tag triggers the deselect method, utilizing the onDeselect attribute. Defining these attributes for a selectable tag automatically invokes their respective functions as callbacks in your projects.

Click me

                    <!-- Selectable Tag with onSelect & onDeselect Attributes -->
<span class='jtbTag jtbTag-selectable jtbTag-purple' onSelect='showProcessDone_select();' onDeselect='showProcessDone_deselect();'>..</span>

<script type='text/javascript'>
	/*----- Defining Functions In Here ------*/
		function showProcessDone_select(){
			alert('Element selected.');
		}
        function showProcessDone_deselect(){
			alert('Element de-selected.');
		}
</script>