Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/3mcd/vue-panel
Suite of Vue components for building Flexbox layouts
https://github.com/3mcd/vue-panel
Last synced: 3 months ago
JSON representation
Suite of Vue components for building Flexbox layouts
- Host: GitHub
- URL: https://github.com/3mcd/vue-panel
- Owner: 3mcd
- Archived: true
- Created: 2015-06-11T21:09:33.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-07-16T00:41:26.000Z (over 5 years ago)
- Last Synced: 2024-04-12T09:33:30.659Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 376 KB
- Stars: 58
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-panel ★36
README
# vue-panel
> Note: This project is no longer maintained.
This plugin aims to provide your [Vue](http://vuejs.org/) application with a
handful of light, composable, Flexbox-powered components.
### Installation
Just `bower` or `npm install ericmcdaniel/vue-panel`. The package is exposed as
a UMD module so you can require it with Browserify/Webpack/etc. or include it in
your page via script tag.
To use this plugin with Vue, simply call `Vue.use(require('vue-panel'))`, or
`Vue.use(window.VuePanel)` if including in a script tag.
### Components
#### VPanel
`` responds to a variety of Flexbox parameters and is useable as both a
`display: flex` element and a flex-item:
```html
```
`` will display any content inside of the element as it's own
transclusion content:
```html
Foo
Lorem ipsum dolor sit amet...
```
`` responds to
* `align-items`,
* `align-self`,
* `order`,
* `direction` (flex-direction),
* `flex`,
* `grow` (flex-grow),
* `shrink` (flex-shrink),
* `basis` (flex-basis),
* and `justify` (justify-content).
The plugin provides two more components: `` and ``.
#### VPanelBar
`` responds to
* `align-items`,
* `direction`,
* `justify`,
* and `size` (flex-basis).
The bar is 30px wide by default. When the `direction` value changes,
the component will broadcast the event `v-panel-bar:direction` (with it's
`$data.direction` value) to child components so they can respond to it's
flex-direction.
#### VPanelContent
`` is a simple flex-item that responds to `flex`, `grow` and
`shrink`.
```html
Click
Foo
```
### Directives
Each of the included components are also provided as directives. These directives can take parameters in the form of attributes, not to be confused with component props. These params follow the same naming conventions as the props documented above.
```html
```
The directives share common defaults with the components, but you will have to manually declare bindings using the `v-bind` directive if you want to hook up ViewModel data to the params. For example:
```html
```
### Configuration
Each of the vue-panel _components_ can be globally configured to initialize with
additional `data` values via an object literal where the key is the property
name and the value is the initial value. This is done by passing an object as
the second parameter to the `Vue.use` function like so:
```javascript
Vue.use(VuePanel, {
// either hyphenated
'v-panel': {
class: 'Panel',
style: {
color: 'red',
backgroundColor: '#ccc'
}
},
// or camel case:
'vPanelBar': {
class: 'Panel-bar'
},
'vPanelContent': {
class: 'Panel-content'
}
});
```
`class` and `style` are currently the only options that have any built-in
effect. The value from `class` will be merged with the class list of each
component instance via the `v-bind:class` directive. The value(s) from `style`
will be merged with the inline styles of each component instance via the
`v-bind:style` directive.
> Note: This feature does not work with the bundled directives. Directives are designed to provide the bare-minimum Flexbox parameters that you can integrate with any component or element.
### Example
Open `example/index.html` for a straightforward example.
### Tests
The plugin ships with Jasmine specs in the `test` folder if installing from NPM
or GitHub. `npm install` to pull down the Vue dependency, then open
`test/index.html` to run the specs.