0.0.23 • Published 6 years ago
yie v0.0.23
使用
<!-- 样式文件 -->
<link rel="stylesheet" href="//unpkg.com/yie@0.0.19/dist/yie.css">
<!-- 依赖包 -->
<script src="//unpkg.com/preact"></script>
<script src="//unpkg.com/preact-transition"></script>
<script src="//unpkg.com/preact-utils"></script>
<script src="//unpkg.com/preact-router"></script>
<!-- 加载所有组件 -->
<script src="//unpkg.com/yie"></script>
<!-- 按需加载 -->
<link rel="stylesheet" href="//unpkg.com/yie@0.0.19/dist/Avatar/style.css">
<script src="//unpkg.com/yie@0.0.19/dist/Avatar/Avatar.umd.js"></script>
颜色
@ui-color-light : #fff;
@ui-color-light-neutral: #e4f5ef;
@ui-color-dark : #2c3e50;
@ui-color-dark-neutral : #4f6f7f;
@ui-color-darker : #1d2935;
@ui-color-primary : #2196f3;
@ui-color-accent : #6806c1;
@ui-color-danger : #e83030;
@ui-color-warning : #ea6e00;
@ui-color-info : #03c2e6;
@ui-color-success : #42b983;
基本参数类型定义
- type Scenery = 'danger' | 'warning' | 'info' | 'success';
- type Colorant = 'primary' | 'accent' | Scenery;
组件
AppActivity
- snackbarTransition?: 'slide' | 'fade';
- navIcon?: string;
- onNavClick?: (e: Event) => void;
- onActionClick?: (e: Event) => void;
- onMenuClick?: (e: Event) => void;
- actions?: Action[];
- maxActionCount?: number;
- title?: string;
- shadowed?: boolean;
- color?: Colorant;
AppLayout
- history?: any;
- onRouterChange?: (args: RouterOnChangeArgs) => void;
Avatar
- color?: Colorant;
- size?: string | number;
- tile?: boolean;
BottomNavigation
- textColor?: Colorant;
- backgroundColor?: Colorant;
- selectedTextColor?: string;
- type?: 'absolute' | 'fixed' | 'static';
items?: Array<string | BottomNavigationItem>;
- BottomNavigationItem
- text?: string;
- icon?: string;
- onClick?: (e: Event, item?: string | BottomNavigationItem) => void;
- BottomNavigationItem
selected?: number;
- onItemClick?: (e: Event, item: BottomNavigationItem) => void;
Button
- color?: Colorant;
- size?: 'big' | 'small';
- type?: 'flat' | 'raised' | 'outline',
- disabled?: boolean;
- leftIcon?: string;
- rightIcon?: string;
- loading?: boolean | 'inline';
- value?: string | number;
- component?: string;
- block?: boolean;
- round?: boolean;
- onClick?: EventListener;
Dialog
- display?: boolean;
- dimmed?: boolean;
- docked?: boolean;
- title?: string;
- onHide?: Function;
- onShow?: Function;
- onButtonClick?: Function;
- okValue?: string;
- cancelValue?: string;
- onOk?: Function;
- onCancel?: Function;
- dismiss?: any;
- onDismiss?: Function;
- buttons?: Array<string | DialogButton>;
Icon
- color?: Colorant;
- name: string;
- size?: 'small' | 'medium' | 'big' | 'large' | 'huge' | 'gigantic';
- onClick?: EventListener;
IconButton
- color?: Colorant;
- size?: 'big' | 'small';
- type?: 'flat' | 'raised' | 'outline',
- disabled?: boolean;
- icon?: string;
- loading?: boolean;
- component?: string;
- round?: boolean;
- onClick?: EventListener;
Input
- type?: 'text' | 'password' | 'number' | 'email';
- value?: string | number;
- alt?: string;
- name?: string;
- placeholder?: string;
- id?: string;
- maxLength?: number;
- minLength?: number;
- max?: number;
- min?: number;
- autocomplete?: string | boolean;
- autofocus?: string | boolean;
- pattern?: string | RegExp;
- formnovalidate?: string;
- form?: string;
- list?: string;
- disabled?: boolean;
- readonly?: boolean;
- required?: boolean;
- onChange?: EventListener;
- onInput?: EventListener;
- onFocus?: EventListener;
- onBlur?: EventListener;
- onKeyUp?: EventListener;
- onKeyDown?: EventListener;
- onKeyPress?: EventListener;
- loading?: 'left' | 'right';
- leftIcon?: string;
- rightIcon?: string;
- status?: Scenery;
- size?: 'big';
- flat?: boolean;
- multiple?: boolean;
- block?: boolean;
- rows?: number;
LoadingIndicator
- color?: Colorant;
- size?: 'small' | 'big';
- overlay?: boolean;
- inline?: boolean;
Menu
- open?: boolean;
- component?: string;
- raised?: boolean;
- origin?: 'top left' | 'top right' | 'bottom left' | 'bottom right' | string;
- items?: Array<MenuItemProps | string | boolean | MenuItem>;
- onBeforeOpen?: Function;
- onOpen?: Function;
- onAfterOpen?: Function;
- onBeforeClose?: Function;
- onClose?: Function;
- onAfterClose?: Function;
MenuItem
- text?: string;
- icon?: string;
- selected?: boolean;
- disabled?: boolean;
- component?: string;
- onClick?: EventListener;
ProgressBar
- indeterminate?: boolean;
- progress?: number;
- color?: Colorant;
Radio
- name?: string;
- label?: string;
- value?: any;
- color?: Colorant;
- labelPosition?: 'left' | 'right';
- disabled?: boolean;
- onBlur?: EventListener;
- onFocus?: EventListener;
- onChange?: (e: Event, active: boolean) => void;
- children?: any[];
Ripple
- component?: string | Component;
- ref?: Function;
- center?: boolean;
RippleInk
- trigger: Element | (() => Element);
- center?: boolean;
Sheet
- display?: boolean;
- dimmed?: boolean;
- docked?: boolean;
- position?: 'top' | 'right' | 'bottom' | 'left';
- floating?: boolean;
- onShow?: Function;
- onHide?: Function;
- bodyStyle?: string | Record<string, any>;
- bodyClassName?: string | string[] | Record<string, any>;
Snackbar
- message?: string | VNode | JSX.Element;
- action?: string;
- actionColor?: Colorant;
- status?: Scenery;
- onClick?: EventListener;
- onActionClick?: EventListener;
- onShow?: (value?: any) => void;
- onHide?: (value?: any) => void;
- onTimeout?: (value?: any) => void;
- display?: boolean;
- animation?: 'slide' | 'fade';
- floating?: boolean;
- position?: SnackbarPosition;
- onAnimating?: (value: SnackbarProps) => void;
- timeout?: number;
SnackbarContainer
- queueSnackbars?: boolean;
- duration?: number;
- position?: SnackbarPosition;
- transition?: 'slide' | 'fade';
Text
- lines?: number;
- value?: string;
- ellipsis?: boolean;
- size?: number | string;
- color?: Colorant;
Tipbox
- title?: string;
- onButtonClick?: Function;
- okValue?: string;
- cancelValue?: string;
- onOk?: Function;
- onCancel?: Function;
- dismiss?: any;
- onDismiss?: Function;
buttons?: Array<string | DialogButton>;
Toolbar
- navIcon?: string;
- onNavClick?: EventListener;
- onActionClick?: EventListener;
- onMenuClick?: EventListener;
- actions?: Action[];
- maxActionCount?: number;
- title?: string;
- shadowed?: boolean;
- color?: Colorant;
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago