flowbite-angular
Version:
<div align="center"> <h1>:construction: flowbite-angular (unreleased) :construction:</h1> <p> <a href="https://flowbite.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github
251 lines (250 loc) • 10.2 kB
TypeScript
import type { ButtonClass, ButtonColors, ButtonFill, ButtonMonochromeColors, ButtonSizes } from './button.theme';
import { ButtonThemeService } from './button.theme.service';
import { BaseComponent } from 'flowbite-angular';
import { InjectionToken } from '@angular/core';
import * as i0 from "@angular/core";
export declare const FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE: InjectionToken<keyof ButtonColors>;
export declare const FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE: InjectionToken<keyof ButtonSizes>;
export declare const FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE: InjectionToken<boolean>;
export declare const FLOWBITE_BUTTON_FILL_DEFAULT_VALUE: InjectionToken<keyof ButtonFill>;
export declare const FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE: InjectionToken<boolean>;
export declare const FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE: InjectionToken<keyof ButtonMonochromeColors | undefined>;
export declare const FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE: InjectionToken<"purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined>;
export declare const FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE: InjectionToken<{
root?: {
base?: {
default?: string | undefined;
span?: string | undefined;
} | undefined;
color?: {
[x: string]: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
[x: number]: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
} | undefined;
gradientMonochrome?: {
[x: string]: string | undefined;
blue?: string | undefined;
red?: string | undefined;
green?: string | undefined;
purple?: string | undefined;
cyan?: string | undefined;
lime?: string | undefined;
pink?: string | undefined;
teal?: string | undefined;
} | undefined;
gradientDuoTone?: {
purpleToBlue?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
cyanToBlue?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
greenToBlue?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
purpleToPink?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
pinkToOrange?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
tealToLime?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
redToYellow?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
} | undefined;
size?: {
[x: string]: string | undefined;
xs?: string | undefined;
sm?: string | undefined;
md?: string | undefined;
lg?: string | undefined;
xl?: string | undefined;
} | undefined;
isPill?: {
enabled?: string | undefined;
disabled?: string | undefined;
} | undefined;
isDisabled?: {
enabled?: string | undefined;
disabled?: string | undefined;
} | undefined;
} | undefined;
span?: {
base?: string | undefined;
isPill?: {
enabled?: string | undefined;
disabled?: string | undefined;
} | undefined;
size?: {
[x: string]: string | undefined;
xs?: string | undefined;
sm?: string | undefined;
md?: string | undefined;
lg?: string | undefined;
xl?: string | undefined;
} | undefined;
} | undefined;
}>;
export declare const buttonDefaultValueProvider: import("@angular/core").EnvironmentProviders;
/**
* @see https://flowbite.com/docs/components/buttons/
*/
export declare class ButtonComponent extends BaseComponent<ButtonClass> {
/**
* Service injected used to generate class
*/
readonly themeService: ButtonThemeService;
/**
* Set the button color
*
* @default primary
*/
color: import("@angular/core").ModelSignal<keyof ButtonColors>;
/**
* Set the button size
*
* @default md
*/
size: import("@angular/core").ModelSignal<keyof ButtonSizes>;
/**
* Set if the button is pill
*
* @default false
*/
isPill: import("@angular/core").ModelSignal<boolean>;
/**
* Set the button fill
*
* @default solid
*/
fill: import("@angular/core").ModelSignal<keyof ButtonFill>;
/**
* Set if the button is disabled
*
* @default false
*/
isDisabled: import("@angular/core").ModelSignal<boolean>;
/**
* Set the button gradient monochrome
*
* @default undefined
*/
gradientMonochrome: import("@angular/core").ModelSignal<keyof ButtonMonochromeColors | undefined>;
/**
* Set the button gradient duotone
*
* @default undefined
*/
gradientDuoTone: import("@angular/core").ModelSignal<"purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined>;
/**
* Set the custom style for this button
*/
customStyle: import("@angular/core").ModelSignal<{
root?: {
base?: {
default?: string | undefined;
span?: string | undefined;
} | undefined;
color?: {
[x: string]: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
[x: number]: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
} | undefined;
gradientMonochrome?: {
[x: string]: string | undefined;
blue?: string | undefined;
red?: string | undefined;
green?: string | undefined;
purple?: string | undefined;
cyan?: string | undefined;
lime?: string | undefined;
pink?: string | undefined;
teal?: string | undefined;
} | undefined;
gradientDuoTone?: {
purpleToBlue?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
cyanToBlue?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
greenToBlue?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
purpleToPink?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
pinkToOrange?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
tealToLime?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
redToYellow?: {
solid?: string | undefined;
outline?: string | undefined;
} | undefined;
} | undefined;
size?: {
[x: string]: string | undefined;
xs?: string | undefined;
sm?: string | undefined;
md?: string | undefined;
lg?: string | undefined;
xl?: string | undefined;
} | undefined;
isPill?: {
enabled?: string | undefined;
disabled?: string | undefined;
} | undefined;
isDisabled?: {
enabled?: string | undefined;
disabled?: string | undefined;
} | undefined;
} | undefined;
span?: {
base?: string | undefined;
isPill?: {
enabled?: string | undefined;
disabled?: string | undefined;
} | undefined;
size?: {
[x: string]: string | undefined;
xs?: string | undefined;
sm?: string | undefined;
md?: string | undefined;
lg?: string | undefined;
xl?: string | undefined;
} | undefined;
} | undefined;
}>;
fetchClass(): ButtonClass;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "flowbite-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "isPill": { "alias": "isPill"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "gradientMonochrome": { "alias": "gradientMonochrome"; "required": false; "isSignal": true; }; "gradientDuoTone": { "alias": "gradientDuoTone"; "required": false; "isSignal": true; }; "customStyle": { "alias": "customStyle"; "required": false; "isSignal": true; }; }, { "color": "colorChange"; "size": "sizeChange"; "isPill": "isPillChange"; "fill": "fillChange"; "isDisabled": "isDisabledChange"; "gradientMonochrome": "gradientMonochromeChange"; "gradientDuoTone": "gradientDuoToneChange"; "customStyle": "customStyleChange"; }, never, ["*", "*", "*"], true, never>;
}