PandaGo Components

Appearance

Return to top
On this page

Tag

We call tags to the components whose main function is to provide information, interactive or not, with a format that stands out above the text strings. For example, it allows us to give context of the state of a component or some selected variant.

We will make use of iconography to support the information expressed in text, as well as the buttons in link format for the interactive elements.

Usage

I'm a tag!
I'm a tag!
Checked tags:
Added tags:

Props

ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads
TagColor | Color colorIndicates the color of the tag Default value: primary
Color bgColorThe color of the tag borders. Predefined if the `color` prop is set to a `Color` value
Color textColorThe color of the text and icon of the tag. Predefined if the `color` prop is set to a `Color` value
boolean isNewTagButtonIndicates if the tag will convert to an input and allow to add new tags Default value: false
boolean hasIconIndicates if the tag has an icon. If the "icon" slot is not provided, a default one will be shown. Default value: false
boolean isDeletableIndicates if the tag can be deleted Default value: false
boolean isDisabledDisable the tag to not allow user interaction. Only works if the "isCheckeable" prop is provided. Default value: false
boolean isCheckeableIndicates if the tag can be checked, converting the component in a checkbox-like one Default value: false
any[] v-modelOnly works if the "isCheckeable" prop is provided. Two way binding of the tag value. It only works if a tagValue is provided. Default value: []
any tagValueOnly works if the "isCheckeable" prop is provided. The intrinsic value of the tag. This value will be pushed to the `v-model` array when the tag is checked. Default value: undefined

WARNING

The checkboxValue prop should be provided along with the v-model one if the isCheckeable prop is provided.

Slots

defaultThe label of the tag
iconThis is the custom icon if the "hasIcon" prop is provided. Try with "fa-envelope", for example

Type declarations

TagColor

ts
export enum TagColor {
	PRIMARY = 'primary',
	SECONDARY = 'secondary',
	TERTIARY = 'tertiary',
	DANGER = 'danger',
	WARNING = 'warning',
	SUCCESS = 'success',
	INFO = 'info',
	LIGHT = 'light',
	MEDIUM = 'medium',
	DARK = 'dark',
	DEFAULT = 'default',
	ERROR = 'error',
	PROCESSING = 'processing',
	ROUTE = 'route',
	PICKUP = 'pickup',
	GIVEBACK = 'giveback'
}

Color

ts
type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;
type CSS_VAR = `var(${string})`;

export type Color = RGB | RGBA | HEX | CSS_VAR;

ComponentSkin

ts
export enum ComponentSkin {
	PANDA = 'panda',
	DESIGN_SYSTEM = 'ds',
}