Types
CarouselSlide
Used in conjunction with the Carousel and Post components.
interface Slide {
id: string;
src: string;
alt?: string;
}FormatNumber
Used in conjunction with the formatNumber utility.
interface FormatNumber {
notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
maximumFractionDigits?: number;
minimumFractionDigits?: number;
style?: 'decimal' | 'currency' | 'percent' | 'unit';
}IconData
Used in conjunction with any Icon components. IconData is just an svg element as a string. The interal icons for this package utilize icons from https://materialdesignicons.com/ but you can use any library that provides the raw svg element.
export const menu = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>';
export const account = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /></svg>';LightboxAction
Used in conjunction with the Post.Images component.
interface LightboxAction {
data: string (IconData);
action: () => void;
}Locale
Used in conjunction with the DatePicker component.
type Locale = {
weekdays?: string[];
months?: string[];
weekStartsOn?: number;
};TableColumn
Used in conjunction with the Table component.
interface TableColumn {
label: string;
column: string;
placement: 'left' | 'center' | 'right';
}TimelineItem
Used in conjunction with the Timeline component.
interface TimelineItem {
type?: 'comment';
avatar?: string;
creator: string;
created: Date;
description: string;
icon?: string (IconData);
}TooltipConfig
Used in conjunction with the tooltip action. STWUI utilizes tippy.js for its tooltips. Refer to their website for official documentation.
interface TooltipConfig {
allowHTML?: boolean;
animation?: 'scale';
appendTo?: Element;
arrow?: boolean | string | SVGElement;
disabled?: boolean;
content?: string | Element;
delay?: number | [number, number];
duration?: number | [number, number];
hideOnClick?: boolean | 'toggle';
ignoreAttributes?: boolean;
inertia?: boolean;
interactive?: boolean;
maxWidth?: number | 'none';
moveTransition?: string;
offset?: [number, number];
placement?:
| 'top'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'auto'
| 'auto-start'
| 'auto-end';
theme?: string;
trigger?: string;
triggerTarget?: Element | Element[];
zIndex?: number;
}TwSizes
Used in conjunction with the Row component. TwSizes is an interface of all TailwindCSS sizes. These can be referenced on the TailwindCSS website here: https://tailwindcss.com/docs/height
type TwSizes =
| '0'
| '0.5'
| '1'
| '1.5'
| '2'
| '2.5'
| '3'
| '3.5'
| '4'
| '5'
| '6'
| '7'
| '8'
| '9'
| '10'
| '11'
| '12'
| '14'
| '16'
| '20'
| '24'
| '28'
| '32'
| '36'
| '40'
| '44'
| '48'
| '52'
| '56'
| '60'
| '64'
| '72'
| '80'
| '96';