1.0.0 • Published 6 years ago
rc-videodscbox v1.0.0
rc-videodscbox
online demo
Usage
class Page extends React.Component {
state = {
infoType: 'in',
infoOpenWhenPreview: false,
}
render() {
// use <num>.(image/*) as filename
var data1 = {
coverUrl: './resource/res1/cover.jpg',
resUrl: './resource/res1',
name: '视频1',
author: <a href="">作者1</a>,
D1: '简介:简介简介简介简介简介简介简介'
}, data2 = {
coverUrl: './resource/res2/cover.jpg',
resUrl: './resource/res2',
name: '视频2',
author: <a href="">作者2</a>,
D1: '简介:简介简介简介简介简介简介简介'
}, state = this.state, props = this.props, dscStyle = {
float: 'left', margin: '0px 10px 5px 0px'
};
return <div style={{padding:'10px 0px'}}>
<div key={'video'} style={{width: 360, margin: '0px auto'}} className={'clearfix'}>
<VideoDscBox infoOpenWhenPreview={state.infoOpenWhenPreview} style={dscStyle}
infoType={state.infoType}
data={data1}></VideoDscBox>
<VideoDscBox infoOpenWhenPreview={state.infoOpenWhenPreview} style={dscStyle} infoType={state.infoType}
data={data2}></VideoDscBox></div>
<div key={'select'}>
<label>infoType:</label>
<Select style={{width:200}} defaultValue={'in'} onChange={(value) => {
var infoOpen = !(value == 'in');
this.setState({infoType: value, infoOpenWhenPreview: infoOpen})
}}>
<Option value={'in'}>in</Option>
<Option value={'bottom'}>bottom</Option>
<Option value={'right'}>rightSm</Option>
</Select>
</div>
</div>
}
}
prop
data
type:
{url?: string, // link href
name: string, // view name
coverUrl: string, // cover img url
resUrl: string, // preview dir url
author?: React.ReactNode, //optinal author node
D1?: React.ReactNode, // optional detail node
D2?: React.ReactNode,// optional detail node
D3?: React.ReactNode,// optional detail node
},
suffix
type?: string, // preview file suffix
className
type?: string,
customInfo
type?: () => React.ReactNode,
previewCount
type?: number, // preview count use filename:.(jpg)
style
type?: object,
prefix
type: React.ReactNode,
infoType
type:?: 'in' | 'bottom' | 'right' ,
display
type: object,//infobox position
onMouseOver
type?: (e: React.SyntheticEvent) => void,
onMouseEnter
type?: (e: React.SyntheticEvent) => void,
onMouseLeave
type?: (e: React.SyntheticEvent) => void,
infoOpenWhenPreview
type: boolean,
displayImage
type: boolean,
preview
type: boolean,
previewCount
type: number,
1.0.0
6 years ago