Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/appletjs/yie

Yie是一款基于preact实现的material风格的UI组件库
https://github.com/appletjs/yie

material-design preact preact-components

Last synced: 15 days ago
JSON representation

Yie是一款基于preact实现的material风格的UI组件库

Host: GitHub
URL: https://github.com/appletjs/yie
Owner: appletjs
Created: 2018-07-16T05:47:55.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-07-16T05:51:03.000Z (over 6 years ago)
Last Synced: 2024-12-14T17:17:22.154Z (about 1 month ago)
Topics: material-design, preact, preact-components
Language: JavaScript
Homepage: https://appletjs.github.io/yie/
Size: 271 KB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

        ## 使用

```html

```

## 颜色

```less

@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;

    

        - BottomNavigationItem

            - text?: string;

            - icon?: string;

            - onClick?: (e: Event, item?: string | BottomNavigationItem) => void;

    

    - 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;

- 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;

    - 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;

    - bodyClassName?: string | string[] | Record;

 

- 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;

    

- Toolbar

    - navIcon?: string;

    - onNavClick?: EventListener;

    - onActionClick?: EventListener;

    - onMenuClick?: EventListener;

    - actions?: Action[];

    - maxActionCount?: number;

    - title?: string;

    - shadowed?: boolean;

    - color?: Colorant;