Superscript

Basic sup with icon.

Usage

Import

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

Html

<asup /> or <Asup />

Configuration

Theme component name: asup

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)"
		/>
		<asup 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)"
		/>
		<asup 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)"
		/>
		<asup v="Svelte" t="round" c="text-white 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)"
		/>
		<asup i="i-mdi:github" t="icon" />
	</span>
	<span class="relative inline-flex items-start">
		<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 v="3" t="circle" c="text-white bg-red-5 h-4.5" />
	</span>
	<span class="relative flex items-start">
		<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="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)"
		/>
		<asup 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)"
		/>
		<asup
			v="New"
			t="overrec"
			c="text-white bg-gradient-to-br from-blue-2 to-green-5 shadow-md shadow-green-3"
		/>
	</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)"
		/>
		<asup
			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)"
		/>
		<asup 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)"
		/>
		<asup
			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)"
		/>
		<asup 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)"
		/>
		<asup 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)"
		/>
		<asup 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)"
		/>
		<asup 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"
			/>
		</asup>
	</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 sup content including icon.

AgufaUI provided Theme

CDefaultType is just string constant "default"

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

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

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

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

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

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

export const DASupOver = {
	[CUseType]: CDefaultType,
	c: "absolute top-0 -translate-y-50% -translate-x-40%",
};

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

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

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

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

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

export const DASup: Readonly<Record<string, IASupProps>> = {
	[CDefaultType]: DASupDefault,
	rec: DASupRec,
	round: DASupRound,
	icon: DASupIcon,
	circle: DASupCircle,
	over: DASupOver,
	overrec: DASupOverRec,
	overround: DASupOverRound,
	overicon: DASupOverIcon,
	overcircle: DASupOverCircle,
	overdot: DASupOverDot,
};

Attributes (Properties)

Default Values

vue

spacex: "space-x-1.5",

Unique

export interface IASupProps extends IProps, IPropsComposeX, IPropsIcon {
	v?: string; // sup 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
}

Superscript #

Usage #

Import #

Html #

Configuration #

Showcase #

Slot #

AgufaUI provided Theme #

Attributes (Properties) #

Default Values #

Unique #

Inherit from IProps #

Inherit from IPropsComposeX #

Inherit from IPropsIcon #