wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature:added patterns in background

Browse Source
This commit is contained in:
rutik wankhade 2020-08-12 15:21:44 +05:30
parent a348fb13f9
commit b4145c6fce
3 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -11,6 +11,7 @@
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a

45
src/components/ConfigCover.js
View File

@ -8,7 +8,8 @@ class ConfigCover extends React.Component {
state = { state = {
title: 'How I built my first project with react', title: 'How I built my first project with react',
bgcolor: '', bgcolor: '',
border: '' border: '',
pattern: ''
}; };
@ -17,7 +18,7 @@ class ConfigCover extends React.Component {
<div className="container"> <div className="container">
<div className="inputData"> <div className="inputData">
<input type="text" placeholder="Enter title here" className="inputTitle" <input type="text" placeholder="Enter title here" className="inputTitle form-control"
onChange={e => this.setState({ title: e.target.value })}></input> onChange={e => this.setState({ title: e.target.value })}></input>
{/* <div className="d-flex flex-row"> {/* <div className="d-flex flex-row">
@ -38,20 +39,46 @@ class ConfigCover extends React.Component {
<input type="color" defaultValue="#8c52ff" <input type="color" defaultValue="#8c52ff"
onChange={e => this.setState({ border: e.target.value })} /> onChange={e => this.setState({ border: e.target.value })} />
<label>Background Pattern</label>
<select onChange={e => this.setState({ pattern: e.target.value })}
className="form-control">
<option>none</option>
<option>pattern-grid-md</option>
<option>pattern-grid-lg</option>
<option>pattern-grid-xl</option>
<option>pattern-cross-dots-xl</option>
<option>pattern-dots-lg</option>
<option>pattern-diagonal-lines-md</option>
<option>pattern-diagonal-lines-lg</option>
<option>pattern-diagonal-lines-xl</option>
<option>pattern-vertical-lines-md</option>
<option>pattern-vertical-lines-lg</option>
<option>pattern-vertical-lines-xl</option>
<option>pattern-horizontal-lines-md</option>
<option>pattern-horizontal-lines-lg</option>
<option>pattern-horizontal-lines-xl</option>
</select>
</div> </div>
<ComponentToImg> <ComponentToImg>
<CoverImage <CoverImage
title={this.state.title} title={this.state.title}
bgcolor={this.state.bgcolor} bgcolor={this.state.bgcolor}
border={this.state.border} border={this.state.border}
pattern={this.state.pattern}
/> />
</ComponentToImg> </ComponentToImg>

4
src/components/CoverImage.js
View File

@ -7,13 +7,15 @@ class CoverImage extends React.Component {
render() { render() {
return ( return (
<div className="cover" <div className={` cover ${this.props.pattern}`}
style={{ backgroundColor:this.props.bgcolor }}> style={{ backgroundColor:this.props.bgcolor }}>
<div className={`${this.props.pattern}`}>
<div className="card" <div className="card"
style={{ borderTop: `15px solid ${this.props.border}`}}> style={{ borderTop: `15px solid ${this.props.border}`}}>
<h1>{this.props.title}</h1> <h1>{this.props.title}</h1>
</div> </div>
</div> </div>
</div>
); );