Badge
Usage
Presentation
This is the display format for the ShBadge constructor, designed to showcase what are its capabilities.
Example Basic
1.2+
This is how it is constructed
::ShBadge
1.2+
::
Props
There aren`t any properties associated to the ShBadge constructor.
Attributes Description
The ShBadge constructor represents a short text that is easily visible. It can be used to represent versions of files, documents, updates etc. Below is a description of the attribute used in the ShBadge constructor.
| Property | Attribute | Default | Description |
|---|---|---|---|
ui |
n/a | n/a | The ui property in the component is a configuration object that allows customization of various styling aspects of the component. Each attribute within the ui property targets a specific part of the component display, providing detailed control over its appearance and layout. Below is a detailed description of each attribute within the ui property: |
wrapper |
config.wrapper |
Defines the overall styling for the container that holds all the elements of the component. | |
description |
n/a | n/a | Intented to be used as a help to content writter. Doesn`t render on website. |
Example Usage
Advanced Settings
An example with customized ui attributes for enhanced display:
1.2+
This is an example with customized ui attributes for enhanced display:
::ShBadge
---
ui:
wrapper: hover:scale-125 duration-300 mx-10 bg-oma-red-50 dark:bg-oma-red-700 text-primary
---
1.2+
::
Config
These style properties can be modified via ui and are stored in the ShBadge.ts and status.ts files:
ShBadge.ts
import status from './status';
export default {
wrapper: status.default,
// Default Tailwind CSS values
default: {
}
}
status.ts
const status: { [key: string]: string } = {
a: 'bg-[#FFFFFF] border-[#E3E3E3] text-[#FF0000]',
b: 'bg-[#000000] border-[#000000] text-[#00FF00]',
c: 'bg-[#FFFF00] border-[#FFFF00] text-[#000000]',
d: 'bg-[#ADD8E6] border-[#ADD8E6] text-[#0000FF]',
default: 'bg-neutral-200 border-neutral-200 dark:border-gray-700 dark:bg-slate-800 dark:text-gray-300 text-gray-700',
};
export default status;
Class Descriptions
These represent the class values utilized in the ShBadge constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.
wrapper
- Value:
status.default - Description: This defines the overall styling for the container holding the element. The value status.default is defined inside of
status.tsfile.
This style property ensure that the ShBadge component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.