Subscript

Basic sub with icon.

Usage

Import

import { Asub } from "@agufaui/${framework name}";

Html

<asub /> or <Asub />

Configuration

Theme component name: asub

Showcase

₉₉₊_Vue_Svelte₃

₉₉₊_New_hot₃_{githubvuesvelte}

^{githubvuesvelte}_New99+Hot

Click to see code

vue

<div class="flex flex-wrap gap-2">
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub v="99+" t="rec" c="text-indigo-6" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub v="Vue" t="rec" c="text-white bg-green-5" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub v="Svelte" t="round" c="text-white bg-red-5" />
	</span>
	<span class="relative inline-flex items-end">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub i="i-mdi:github" t="icon" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub v="3" t="circle" c="text-white bg-red-5 h-4.5" />
	</span>
	<span class="relative inline-flex items-end">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub t="circle" c="bg-red-5 h-2" />
	</span>
</div>
<div class="flex flex-wrap mt-4 gap-x-7 gap-y-3">
	<span class="relative">
		<abutton
			v="Link"
			c="shadow-md hover:(-translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub v="99+" t="overrec" c="text-indigo-6" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub
			v="New"
			t="overrec"
			c="text-white bg-gradient-to-br from-blue-2 to-green-5 shadow-md shadow-green-3 !-translate-x-33%"
		/>
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub
			v="hot"
			t="overround"
			c="text-white bg-gradient-to-br from-purple-2 to-red-5 shadow-md shadow-red-3"
		/>
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="shadow-md hover:(-translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub i="i-mdi:github" t="overicon" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub
			v="3"
			t="overcircle"
			c="text-white bg-gradient-to-br from-red-2 to-red-5 shadow-md shadow-red-3 h-4.5"
		/>
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub t="overdot" c="bg-red-5" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub t="overdot" c="bg-red-5 animate-pulse" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub t="overdot" c="bg-red-5 animate-ping !-translate-x-65%" />
	</span>
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asub t="over" class="!-translate-x-10%">
			<abadge
				v="github"
				t="round"
				c="text-white bg-gradient-to-br from-purple-2 to-black shadow-md shadow-gray-4"
			/>
			<abadge
				v="vue"
				t="round"
				c="text-white bg-gradient-to-br from-blue-2 to-green-5 shadow-md shadow-green-3"
			/>
			<abadge
				v="svelte"
				t="round"
				c="text-white bg-gradient-to-br from-purple-2 to-red-5 shadow-md shadow-red-3"
			/>
		</asub>
	</span>
</div>
<div class="flex my-5">
	<span class="relative">
		<abutton
			v="Link"
			c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
		/>
		<asup t="over" class="!-translate-x-5%">
			<abadge
				v="github"
				t="round"
				c="text-white bg-gradient-to-br from-purple-2 to-black shadow-md shadow-gray-4"
			/>
			<abadge
				v="vue"
				t="round"
				c="text-white bg-gradient-to-br from-blue-2 to-green-5 shadow-md shadow-green-3"
			/>
			<abadge
				v="svelte"
				t="round"
				c="text-white bg-gradient-to-br from-purple-2 to-red-5 shadow-md shadow-red-3"
			/>
		</asup>
		<asub t="over" class="!-translate-x-5%">
			<abadge
				v="New"
				t="round"
				c="text-white bg-gradient-to-br from-indigo-2 to-blue-5 shadow-md shadow-blue-4"
			/>
			<abadge
				v="99+"
				t="round"
				c="text-white bg-gradient-to-br from-orange-2 to-amber-5 shadow-md shadow-amber-3"
			/>
			<abadge
				v="Hot"
				t="round"
				c="text-white bg-gradient-to-br from-purple-2 to-red-5 shadow-md shadow-red-3"
			/>
		</asub>
	</span>
</div>

Slot

One default slot replace sub content including icon.

AgufaUI provided Theme

CDefaultType is just string constant "default"

import { CDefaultType, CUseType } from "@agufaui/config";
import type { IASubProps } from "../../types/basic/ASub";

export const DASubDefault = {
	c: "text-xs",
};

export const DASubRec = {
	[CUseType]: CDefaultType,
	c: "px-1 py-0.2",
};

export const DASubRound = {
	[CUseType]: CDefaultType,
	c: "rounded-full px-1.5 py-0.2",
};

export const DASubIcon = {
	ic: "text-lg",
};

export const DASubCircle = {
	[CUseType]: CDefaultType,
	c: "rounded-1/2 aspect-square",
};

export const DASubOver = {
	[CUseType]: CDefaultType,
	c: "absolute bottom-0 translate-y-30% -translate-x-40%",
};

export const DASubOverRec = {
	[CUseType]: "over",
	c: "px-2 py-0.5",
};

export const DASubOverRound = {
	[CUseType]: "over",
	c: "rounded-full px-2 py-0.5",
};

export const DASubOverIcon = {
	ic: "text-lg",
	c: "absolute bottom-0 translate-y-30% -translate-x-50%",
};

export const DASubOverCircle = {
	[CUseType]: "default",
	c: "rounded-1/2 aspect-square absolute bottom-0 translate-y-20% -translate-x-50%",
};

export const DASubOverDot = {
	[CUseType]: "default",
	c: "rounded-1/2 aspect-square h-2 absolute bottom-0 translate-y-20% -translate-x-65%",
};

export const DASub: Readonly<Record<string, IASubProps>> = {
	[CDefaultType]: DASubDefault,
	rec: DASubRec,
	round: DASubRound,
	icon: DASubIcon,
	circle: DASubCircle,
	over: DASubOver,
	overrec: DASubOverRec,
	overround: DASubOverRound,
	overicon: DASubOverIcon,
	overcircle: DASubOverCircle,
	overdot: DASubOverDot,
};

Attributes (Properties)

Default Values

vue

spacex: "space-x-1.5",

Unique

export interface IASubProps extends IProps, IPropsComposeX, IPropsIcon {
	v?: string; // sub text.  Not configurable
	vc?: string; // css classes for text element
}

Inherit from IProps

export interface IProps {
	t?: string; // user defined or AgufaUI provided component type.  Not configurable
	c?: string; // css classes for component root html element
}

Inherit from IPropsComposeX

export interface IPropsComposeX {
	spacex?: string; // space between elements in x-axis eg. space-x-1.5
}

Inherit from IPropsIcon

export type TLRPosition = "left" | "right";

export interface IPropsIcon {
	i?: string; // icon eg. i-eos-icons:loading
	ipos?: TLRPosition; // icon position
	ic?: string; // css classes for icon element
}

Subscript #

Usage #

Import #

Html #

Configuration #

Showcase #

Slot #

AgufaUI provided Theme #

Attributes (Properties) #

Default Values #

Unique #

Inherit from IProps #

Inherit from IPropsComposeX #

Inherit from IPropsIcon #