Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/styletron-vue
Vue bindings for Styletron.
https://github.com/egoist/styletron-vue
cssinjs styletron vue
Last synced: 3 months ago
JSON representation
Vue bindings for Styletron.
- Host: GitHub
- URL: https://github.com/egoist/styletron-vue
- Owner: egoist
- License: mit
- Created: 2017-06-28T15:31:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T13:54:20.000Z (about 3 years ago)
- Last Synced: 2024-11-07T10:41:47.096Z (4 months ago)
- Topics: cssinjs, styletron, vue
- Language: JavaScript
- Homepage: https://egoist.moe/styletron-vue
- Size: 451 KB
- Stars: 48
- Watchers: 5
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# styletron-vue
[](https://npmjs.com/package/styletron-vue) [](https://npmjs.com/package/styletron-vue) [](https://circleci.com/gh/egoist/styletron-vue/tree/master) [](https://github.com/egoist/donate)
> Vue bindings for [Styletron](https://github.com/rtsao/styletron).
## Install
```bash
yarn add styletron styletron-vue
```
CDN: [UNPKG](https://unpkg.com/styletron-vue/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/styletron-vue/dist/)
## Usage
Bind `styletron` instance to root Vue instance:
```js
import StyletronVue from 'styletron-vue'
import Styletron from 'styletron'
import MyApp from './MyApp.vue'
Vue.use(StyletronVue)
const styletron = new Styletron()
// You can set `styletron` instance in any parent component options
// Like in the root instance options
new Vue({
styletron,
render: h => h(MyApp)
})
```
Then use `styletron-vue`:
in single-file component
```vue
I am pink
import { styled } from 'styletron-vue'
const StyledButton = styled('div', {
color: 'pink'
})
export default {
components: {
StyledButton
}
}
```
in component with render function
```js
import { styled } from 'styletron-vue'
const StyledButton = styled('div', {
color: 'pink'
})
export default {
render() {
return I am pink
}
}
```
### Access Props
```js
styled('div', props => ({
color: props.dark ? '#000' : '#fff'
}), ['dark']) // Specify the `props` as the third arg
// You can do any prop validation here, see:
// https://vuejs.org/v2/guide/components.html#Prop-Validation
// It's required if you want to access props
```
### Styled Component
```js
const Button = styled('button', props => ({
color: props.dark ? 'darkred' : 'red'
}), ['dark'])
const PinkButton = styled(Button, props => ({
color: props.dark ? 'darkpink' : 'pink'
}))
// Props will also be inherited
// So you don't need to define it again
```
### Theming
Check out [discussion here](https://github.com/egoist/styletron-vue/issues/2).
## API
### styled(tag, styles, [props])
#### tag
Type: `string` `object`
String or component object.
#### styles
Type: `object` `function`
```js
// props: component props
// ctx: `ctx` of this functional component
styled(tag, (props, ctx) => ({}))
```
When you're accessing `props`, you actually have to provide the third arg: [props](#props).
#### props
Type: `Array` `object`
Prop validation.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**styletron-vue** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/styletron-vue/contributors)).
> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)