Getting started

Introduction

Customization

Installation

Licence

Core

Foundations

Rebooted elements

Colors

Breakpoints

Z-Index

Base component

Utilities

Layout systems

Flex system

Grid system

Design

Background

Borders

Display

Floating

Interactions

Opacity

Overflow

Positioning

Shadows

Sizing

Spacing

Text

Visibility

Components

Form elements

JTB-Checkbox

JTB-Input

JTB-Radio

JTB-Select

JTB-Switch

JTB-Textarea

Others

JTB-Alert

JTB-Breadcrumb

JTB-Button

JTB-ContextMenu

JTB-Notification

JTB-Table

JTB-Tag

Layout

JTB-Container-Fluid

JTB-Dropdown

JTB-Panel

JTB-Tooltip

JTB-Panel

A flexible container for organizing and displaying content efficiently.

About

The JTB-Panel is a flexible and structured container designed to hold and organize content efficiently. Whether you're displaying text, images, interactive elements, or other UI components, the JTB-Panel provides a clean and adaptable layout solution that enhances readability and user experience.

Its customizable design allows it to fit seamlessly into any web application, ensuring content is presented in a well-organized and visually appealing manner.

In JTB_MD, the JTB-Panel's element tag is defined as <jtb-panel>.

How to use

To create a JTB-Panel in your projects, use the <jtb-panel> tag in the way that best suits your content needs. Whether you add elements dynamically with JavaScript, directly in HTML, or through server-side languages like PHP, the structure remains adaptable. As long as the component is correctly initialized, JTB_MD will handle its rendering seamlessly.

Once you've defined your panel and specified its content, you can customize its appearance using utility classes or JavaScript interactions, ensuring it aligns with your design requirements.

Hello! I am a good boi!

<!-- Panel element -->
<jtb-panel>
    ... your content goes here ...
</jtb-panel>

/*----- Create container -----*/
    var myPanel = document.createElement('jtb-panel');

/*----- Adjust content -----*/
    myPanel.innerHtml = '... your content goes here ...';
    
/*----- Add element to DOM -----*/
    document.body.append(myPanel);

Customization

To customize your panels you can simply use their pre-defined attributes thich allow you to tailor the element to meet your specific requirements and preferences via modifying its appearance and design.

Style and appearance

format

To change the format of the panel element, use the format attribute with your desired value.

Available options are: default | inverse.

Default panel looks like this.

Inverse panel looks like this.

<!-- default format -->
<jtb-panel format='default'></jtb-panel>

<!-- inverse format -->
<jtb-panel format='inverse'></jtb-panel>

/*----- Create element -----*/
    var myPanel = document.createElement('jtb-panel');
    
/*----- Adjust format -----*/
    myPanel.format = 'default'; // Set format = default
    myPanel.format = 'inverse'; // Set format = inverse

size

To adjust the size of the panel element, use the size attribute to specify your desired value.

Available options are: xs | sm | md | lg | xl.

xs makes panel look like this.

sm makes panel look like this.

md makes panel look like this.

lg makes panel look like this.

xl makes panel look like this.

<!-- xs panel -->
<jtb-panel size='xs'></jtb-panel>

<!-- sm panel -->
<jtb-panel size='sm'></jtb-panel>

<!-- md panel -->
<jtb-panel size='md'></jtb-panel>

<!-- lg panel -->
<jtb-panel size='lg'></jtb-panel>

<!-- xl panel -->
<jtb-panel size='xl'></jtb-panel>

/*----- Create element -----*/
    var myPanel = document.createElement('jtb-panel');
    
/*----- Adjust size -----*/
    myPanel.size = 'xs'; // Set size = xs
    myPanel.size = 'sm'; // Set size = sm
    myPanel.size = 'md'; // Set size = md
    myPanel.size = 'lg'; // Set size = lg
    myPanel.size = 'xl'; // Set size = xl

shape

To change the shape of the panel element, use the shape attribute with your desired value.

Available options are: default | rect.

Default panel element

Rectengular panel element.

<!-- default shape -->
<jtb-panel shape='default'></jtb-panel>

<!-- rect shape -->
<jtb-panel shape='rect'></jtb-panel>

/*----- Create element -----*/
    var myPanel = document.createElement('jtb-panel');
    
/*----- Adjust shape -----*/
    myPanel.shape = 'default'; // Set shape = default
    myPanel.shape = 'rect'; // Set shape = rect

Listeners & Callbacks

JTB Panels are components built upon the jtbComponent element. As a result, they inherit all global listeners and callbacks, ensuring consistent event handling. For a detailed overview, refer to the Base component - Core page.

Methods

Similar to listeners and callbacks, JTB Panels also inherit all methods from the base component, enabling seamless functionality. For a complete list of available methods, visit the Base component - Core page.

API

While each property on its own brings unique changes to the elements, combining them can help you create the perfect one.

For making it easier to navigate through all the attributes, we’ve created a comprehensive table for you. Below, you can find a list of all and their uses.

Category	Property	Type	Possible values	Description
Style & appearance	format	string	`defaultinverse`	Specifies the format of the alert.
	size	string	`xssmmdlgxl`	Specifies the size of the alert.
	shape	string	`defaultrectpill`	Specifies the shape of the alert.
Listeners & callbacks	_create	function	-	The state listener that is invoked immediately after the element is appended to the DOM.
	_destroy	function	-	The state listener that is invoked right before the element is removed from the DOM.
	_show	function	-	The state listener that is invoked when the element element becomes visible.
	_hide	function	-	The state listener that is invoked when the element becomes hidden.

PREVIOUSJTB-Dropdown

NEXTJTB-Tooltip

On this page

About
How to use
Customization

Style and appearance

format
size
shape

Listeners & Callbacks
Methods
API