Types
CarouselSlide
Used in conjunction with the Carousel and Post components.
interface Slide {
id: string;
src: string;
alt?: string;
}
DatePickerAction
Used in conjunction with the DatePicker components.
interface DatePickerAction {
label: string;
action: () => void;
}
DropResult
Used in conjunction with the FilePicker utility.
interface DropResult {
accepted: File[];
rejected: File[];
}
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;
}
const localDefault = {
weekdays: [
dayjs().day(0).format('dd'), // Sunday
dayjs().day(1).format('dd'), // Monday
dayjs().day(2).format('dd'), // Tuesday
dayjs().day(3).format('dd'), // Wednesday
dayjs().day(4).format('dd'), // Thursday
dayjs().day(5).format('dd'), // Friday
dayjs().day(6).format('dd') // Saturday
],
months: [
dayjs().month(0).format('MMMM'), // January
dayjs().month(1).format('MMMM'), // February
dayjs().month(2).format('MMMM'), // March
dayjs().month(3).format('MMMM'), // April
dayjs().month(4).format('MMMM'), // May
dayjs().month(5).format('MMMM'), // June
dayjs().month(6).format('MMMM'), // July
dayjs().month(7).format('MMMM'), // August
dayjs().month(8).format('MMMM'), // September
dayjs().month(9).format('MMMM'), // October
dayjs().month(10).format('MMMM'), // November
dayjs().month(11).format('MMMM') // December
],
weekStartsOn: 0
};
SelectOption
Used in conjunction with the Select component.
interface SelectOption {
[key: string]: any;
value: string;
}
TableColumn
Used in conjunction with the Table component.
interface TableColumn {
label: string;
column: string;
placement: 'left' | 'center' | 'right';
class: string;
}
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';