Type list
import type { SvelteComponent } from 'svelte';
export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
export type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
export type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
export type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
export type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow'
export type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl'
export type InputType = 'button'| 'checkbox'| 'color'| 'date'| 'datetime-local'| 'email'| 'file'| 'hidden'| 'image'| 'month'| 'number'| 'password'| 'radio'| 'range'| 'reset'| 'search'| 'submit'| 'tel'| 'text'| 'time'| 'url' | 'week';
export interface ButtonGroupType {
name: string;
href?: string;
rel?: string;
icon?: typeof SvelteComponent;
}
export type CardButtonType = {
textSize?: Textsize;
name: string;
type?: Buttontypes;
href?: string;
rel?: string;
rounded?: boolean;
};
export type ImgType = {
src: string;
alt?: string;
}
export interface LinkType {
name: string;
href: string;
rel?: string;
}
export interface SiteType {
name: string;
href: string;
img?: string;
}
export interface SocialMediaType {
href: string;
icon: typeof SvelteComponent;
}
export type AlignType = 'text-center' | 'text-left' | 'text-right'
export interface TabType {
name: string;
active: boolean;
href: string,
rel?: string,
}
export interface IconTabType {
name: string;
active: boolean;
href: string,
rel?: string,
icon?: typeof SvelteComponent;
}
export interface InteractiveTabType {
name: string;
id: number;
content: string | typeof SvelteComponent;
}
export interface TabHeadType {
name: string;
id: number;
}
export interface PillTabType {
name: string;
selected: boolean;
href: string;
}
export interface NavbarType {
name: string;
href: string;
rel?: string;
child?: NavbarType[];
}
export interface SocialMediaLinkType {
parent: string;
children?: LinkType[]
}
export interface DropdownType {
name: string;
href: string;
divider: boolean;
}
export interface ListCardType {
img: ImgType;
field1: string;
field2?: string;
field3?: string;
}
export type AuthFunctionType = () => Promise<void>;
export type ButtonType = 'button' | 'submit' | 'reset'
export interface AuthFieldType {
label: string;
fieldtype: string;
required?: boolean;
placeholder?: string;
}
export type SidebarType = {
id: number;
name: string;
href?: string;
icon?: typeof SvelteComponent;
rel?: string;
children?: SidebarType[];
subtext?: HTMLElement;
}
export type SidebarCtaType = {
label: string;
text: HTMLElement;
}
export type SelectOptionType = {
name: string;
value: string;
}
export interface AvatarType {
src?: string;
alt?: string;
size?: 6 | 8 | 12 | 16 | 24 | 48;
border?: boolean;
round?: boolean;
header?: string;
text?: string;
}
export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur'
export interface TimelineItemType {
date: Date | string;
title: string;
icon?: typeof SvelteComponent;
href?: string;
linkname?: string;
text?: HTMLElement | string;
}
export interface TimelineItemVerticalType {
date: Date | string;
title: string;
icon?: typeof SvelteComponent;
href?: string;
linkname?: string;
text?: HTMLElement | string;
}
export interface TimelineItemHorizontalType {
date: Date | string;
title: string;
icon?: typeof SvelteComponent;
text?: HTMLElement | string;
}
export interface ActivityType {
title: HTMLElement | string ;
date: Date | string;
src: string;
alt: string;
text?: HTMLElement | string;
}
export interface GroupTimelineType {
title: string | HTMLElement;
src: string;
alt: string;
href?: string;
isPrivate?: boolean;
comment?: string | HTMLElement;
}
export interface PageType {
pageNum: number;
href: string;
}
export interface TransitionParamTypes{
delay?: number,
duration?: number,
easing?: (t: number) => number,
css?: (t: number, u: number) => string,
tick?: (t: number, u: number) => void
}
export interface CheckboxType {
id: string;
label: string;
checked?: boolean;
disabled?: boolean;
helper?: string
}
export interface RadioType {
id: string;
label: string;
value: string;
checked?: boolean;
disabled?: boolean;
}
Related topics
Getting started
Type list
About
Flowbite-Svelte-CLI
References
Svelte
SvelteKit
TailwindCSS
Flowbite
Svelte-sidebar