README
作者:张万合
邮箱:60zy@163.com
快速开始
npm
npm install vikingship-whzhang --save
use
import {Button,Menu,Icon,Upload,Select} from 'vikingship-whzhang'
import 'vikingship-whzhang/dist/index.css'
``sh
Select Component interface
interface SelectProps {
onChange?:(value)=>void;
placeholder?:string;
dataSource:any;
styles?: React.CSSProperties;
theme?: ThemeProps;
values?:{[key:string]:number};
}
Button Component code eg:
//获取select组件选择数据的方法
function handleClcik(selected){
console.log("selected",selected)
}
//数据源
const dataSource=[{title:"汽车",value:1},{title:"卡车",value:2},{title:"摩托车",value:3}]
const values=[1,2]
<Select placeholder={"请选择"} values={values} onChange={handleClcik} dataSource={dataSource}></Select>
Button Component interface
interface BaseButtonProps {
className?:string;
disabled?:boolean;
size?:ButtonSize;
btnType?:ButtonType;
children:React.ReactNode;
href?:string;
}
Button Component code eg:
<ThemeContext.Provider value={themes.blue}>
<header className="App-header">
<Button autoFocus={true} onClick={() => alert("hehe")}>Hello</Button>
<Button disabled={true}>Disabled Button</Button>
<Button btnType={ButtonType.Primary} size={ButtonSize.Large}>Large Primary</Button>
<Button btnType={ButtonType.Danger} size={ButtonSize.Small}>Small Danger</Button>
<Button btnType={ButtonType.Link}>Baidu Link</Button>
<Button disabled={true} btnType={ButtonType.Link}>Disabled Link</Button>
</header>
</ThemeContext.Provider>
Upload Component interface
interface IUploadProps {
action:string,
defaultFileList?:UploadFile[],
onSuccess?:(data:any,file:any)=>void,
onProgress?:(percentage:number,file:File)=>void,
beforeUpload?:(file:File)=>boolean | Promise<File>,
onChange?:(file:File)=>void;
onError?:(err:any,file:File)=>void;
onRemove?:(file:UploadFile)=>void;
headers?:{[key:string]:any};
name?:string;
data?:{[key:string]:any};
withCredentials?:boolean;
multiple?:boolean;
accept?:string,
drag?:boolean
}
Upload Code eg:
<Upload
action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
defaultFileList={[]}
onProgress={(percentage, file)=>console.log(percentage,file)}
onSuccess={(data,file)=>console.log(data,file,'success')}
onChange={(file)=>console.log(file,'onChange')}
onError={(err,file)=>console.log(err,file,'error')}
beforeUpload={beforeUpload}
name='fileName'
data={{'key':'1'}}
headers={{'X-powered-By':'vikingship'}}
accept=".jpg"
multiple
drag={true}
>
<Icon icon={'upload'} size={'5x'} theme={"secondary"}/>
<br/>
<p>drag file over to upload</p>
</Upload>
<Upload
action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
defaultFileList={[]}
onProgress={(percentage, file)=>console.log(percentage,file)}
onSuccess={(data,file)=>console.log(data,file,'success')}
onChange={(file)=>console.log(file,'onChange')}
onError={(err,file)=>console.log(err,file,'error')}
beforeUpload={beforeUpload}
name='fileName'
data={{'key':'1'}}
headers={{'X-powered-By':'vikingship'}}
accept=".jpg"
multiple
drag
>
<Button btnType={ButtonType.Primary}>upload</Button>
</Upload>
Menu Component interface
export interface MenuProps {
defaultIndex?:string,
className?:string,
mode?:MenuMode,
style?:React.CSSProperties,
onSelect?:SelectCallback,
defaultOpenSubMenus?:string[]
}
Menu Code eg:
<Menu defaultIndex={"0"} mode={'vertical'} defaultOpenSubMenus={['3']} onSelect={(index)=>console.log(`menu component click menuItem${index}`)}>
<MenuItem>cool lick</MenuItem>
<MenuItem disabled={true}>cool lick 2</MenuItem>
<MenuItem>cool lick 3</MenuItem>
<MenuItem>cool lick 4</MenuItem>
<SubMenu title={"subMenu"}>
<MenuItem>cool lick 5</MenuItem>
<MenuItem>cool lick 6</MenuItem>
</SubMenu>
</Menu>
Select Component interface
export interface ProgressProps {
percent: number;
strokeHeight?: number;
showText?: boolean;
styles?: React.CSSProperties;
theme?: ThemeProps;
}
Select Code eg:
<Select percent={50} strokeHeight={20} showText={true}/>