Contents
Getting Start
npm install styled-components
Usage
import styled from 'styled-components';
import { preloader } from 'iwant-style';
const Preloader = styled.div`
${preloader};
`;
...
<Preloader>
<div />
<div />
<div />
</Preloader>
...
Components
PreLoader
Usage
import styled from 'styled-components';
import { preloader } from 'iwant-style';
const Preloader = styled.div`
${preloader};
`;
...
<Preloader>
<div />
<div />
<div />
</Preloader>
...
Properties
Name |
Parameter |
Default |
${preloader} |
|
bubbles |
${preloaderCircle} |
|
circle |
Preloader Circle
import styled from 'styled-components';
import { preloaderCircle } from 'iwant-style';
const Preloader = styled.div`
${preloaderCircle};
`;
...
<Preloader>
<div />
</Preloader>
...
Avatar
Usage
import styled from 'styled-components';
import { avatar } from 'iwant-style';
const Avatar = styled.img`
${avatar};
`;
...
<Avatar src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample9.jpg' />
...
Properties
Name |
Parameter |
Default |
${avatar} |
|
person |
Button
Usage
import styled from 'styled-components';
import { btn } from 'iwant-style';
const Button = styled.button`
${btn};
`;
...
<Button>Start</Button>
...
Properties
Name |
Parameter |
Default |
${btn} |
|
square |
${btn(param)} |
"disable" |
|
${btn(param)} |
"float" |
|
Input
Usage
import styled from 'styled-components';
import { input } from 'iwant-style';
const Input = styled.div`
${input};
`;
...
<Input>
<input type='text' required />
<span />
<label>Name</label>
</Input>
...
Dark
import styled from 'styled-components';
import { inputDark } from 'iwant-style';
const Dark = styled.form`
${inputDark};
`;
...
<Dark action='' method=''>
<input type='search' placeholder='What are you looking for?' />
<button>Search</button>
</Dark>
...
Properties
Name |
Parameter |
Default |
${input} |
|
animation |
Card
Usage
import styled from 'styled-components';
import { card } from 'iwant-style';
const Card = styled.div`
${card};
`;
...
<Card>
<h1>Title</h1>
<p>lorem inpson</p>
</Card>
...
Properties
Name |
Parameter |
Default |
${card} |
|
info |
Pagination
Usage
import styled from 'styled-components';
import { pagination } from 'iwant-style';
const Pagination = styled.ul`
${pagination};
`;
...
<Pagination>
<li>
<a href='#'><</a>
</li>
<li>
<a href='#'>1</a>
</li>
<li>
<a href='#'>2</a>
</li>
<li>
<a href='#'>3</a>
</li>
<li>
<a href='#'>></a>
</li>
</Pagination>
...
Properties
Name |
Parameter |
Default |
${pagination} |
|
arrow |
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Author
Contributors
| Mário Rodeghiero
License
This project is licensed under the MIT License - see the LICENSE.md file for details