Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vouill/vue-bulma-components
Translate Bulma css api to vue components
https://github.com/vouill/vue-bulma-components
Last synced: about 12 hours ago
JSON representation
Translate Bulma css api to vue components
- Host: GitHub
- URL: https://github.com/vouill/vue-bulma-components
- Owner: vouill
- Created: 2017-07-09T19:32:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-10T14:22:55.000Z (over 5 years ago)
- Last Synced: 2024-11-07T17:57:39.273Z (9 days ago)
- Language: JavaScript
- Size: 484 KB
- Stars: 159
- Watchers: 10
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-bulma-components
[](https://travis-ci.org/vouill/vue-bulma-components)
The goal of this library is to use the bulma class syntax as components and props.
**3kb minified**
[Demo](https://teller-multisystems-48055.netlify.com) and [try the live demo](https://codesandbox.io/s/wk2w3z0zk5) too :)
## Usage
Exemple with grid system
Original Bulma way:
``` html
A column
```
Vue-bulma-component way:
```html
A column
```
### Using css class as directives at your advantage
One cool feature of using the Bulma css api as directives is toggling them. See how the `is-loading` class is handled
Ex:
``` html
Send
```
Vue-bulma-component way:
``` html
Send
```
Much nicer right ? ;)
**Note:**
You can also use the Pascal case notation, example:
``` html
Send
```
### Using custom classes
If you want to add any other class simply use the normal class attribute
``` html
Send
```
## Install
```shell
yarn add vue-bulma-components
or
npm install --save vue-bulma-components
```
Then install [Bulma](http://bulma.io/documentation/overview/start/) however you want :).
### Use all components globally in your app
Inside your main.js
```javascript
import vueBulmaComponents from 'vue-bulma-components'
Vue.use(vueBulmaComponents)
```
It will make globallly available all [these](https://github.com/vouill/vue-bulma-components/blob/master/src/plugin/helpers.js#L22) bulma components with the prefix `b-` or `B` if you prefer the Pascal case component naming.
You can also change the default prefix of all the bulma components (to avoid collision with existing components in your project)
```javascript
import vueBulmaComponents from 'vue-bulma-components'
Vue.use(vueBulmaComponents, {prefix: 'y-'})
```
Instead of using `` you need to use ``
### Use specific bulma components in your components
``` html
import { bulmaComponentGenerator } from 'vue-bulma-components'
export default {
components: {
box: bulmaComponentGenerator('box')
}
}
```
Yes, you can actually create any vue-bulma-component by calling `bulmaComponentGenerator(bulmaComponentStr)`.
## Components
By default, most of the components are rendered as `
`. You can also use the prop `outerElement="span"` to change this behavior.
If you want to globally apply default outer element for some bulma component, you can use `outerElement` option on **`Vue.use()`**.
```javascript
import vueBulmaComponents from 'vue-bulma-components'
Vue.use(vueBulmaComponents, {
outerElement: {
'navbar': 'nav',
'navbar-item': 'a'
}
})
```
**If you use the `Vue.use()` method to use the vue-bulma-components.**
Most of the components are named after the bulma class they belong to.
Ex: ` ...`
However, some bulma components are also named after native html element. This is why [they are prefixed](https://github.com/vouill/vue-bulma-components/blob/master/src/plugin/helpers.js#L24).
Ex :
- Bulma : `input`
- vue-component-bulma: ``. This prefix is used to avoid collision with native html `` element.
**If you generate bulma components**
``` html
import { bulmaComponentGenerator } from 'vue-bulma-components'
export default {
components: {
box: bulmaComponentGenerator('box', 'span')
}
}
```
Usage:
`bulmaComponentGenerator(bulma_coponent_name,rendered_outer_html_element )`.
Note: `rendered_outer_html_element` is optional.
## Known limitations:
Currently you cannot use v-model with `` as expected. Because `vue-bulma-components` use functional components.
Don't worry, you can still bind a value to a `` component using `@input` event (it's what v-model does under the hood):
```html
{{foo}}
export default {
data: () => ({
foo: ''
}),
method: {
handleInputChange (e) {
this.foo = e.target.value
}
}
}
```
Note:
If you come from the version `1.x.x`, there is a breaking change.
From `2.x.x` when using `Vue.use(vueBulmaComponents)`, default available components are prefixed by `` instead of `<[bulmacomponent]/>`