A Vue-based Flexbox layout container for SVG elements.
A Vue-based Flexbox layout container for SVG elements.
SVG lacks the convenient layout features of CSS; all elements must be positioned absolutely. There are ways around this (with foreignObject for instance), but there are cases where you just end up having to write cumbersome layout calculations for absolute positions. This component attempts to free us from having to do that.
No. It computes positions using Facebook's css-layout, which implements a subset of the Flexbox algorithm. This table shows what is supported. These settings are not supported:
On the container:
align-content: space-between
align-items: baseline
align-items: stretch
flex-wrap: wrap-reverse
justify-content: space-evenly
On the children:
align-self
flex-basis
flex-grow
flex-shrink
order
Despite these omissions, css-layout implements enough of Flexbox to be useful.
Live demo: jie123108.github.io/vue-svg-flexbox
Here is the source for the examples. To run them locally:
- yarn:
yarn install && yarn start
. - or npm:
npm install && npm run start
vue-svg-flexbox is intended to be installed from npm and bundled into your Vue app.
yarn add @jie123108/vue-svg-flexbox
Add an instance of the Flexbox
component to your app, and style it to taste. CSS-Tricks has a great overview of Flexbox if you need help on that score.
<template>
<Flexbox :x="x">
<rect :fill="bgcolor" :width="width" :height="height" stroke="blue" :style="{}" />
<text :x="width/2" :y="height/2" :style="textStyle">
<slot></slot>
</text>
</Flexbox>
</template>
<script>
import Flexbox from '@jie123108/vue-svg-flexbox';
export default {
name: 'Textbox',
components: {
Flexbox,
},
props: {
bgcolor: {type: String, default: '#c0ffc0'},
x: {type: Number, default: 0},
width: {type: Number, default: 100},
height: {type: Number, default: 100},
textStyle: {
type: Object,
default () {
return {
"dominant-baseline": "central",
"font-family": "arial",
"text-anchor": "middle",
}
},
}
}
}
</script>
For how to achieve specific layouts using this component, see the examples.
Arbitrary string to set as className
on the root element of the Flexbox
instance. By default, the component has no class name.
Callback that will receive the entire computed layout when the layout updates. This is useful if you need to inspect layout values from a Flexbox
instance in order to make decisions elsewhere in your application.
Object containing Flexbox settings, as well as optional width and/or height. You have to pass something in order for layout to occur.
The horizontal position, in pixels, at which the Flexbox
instance should appear within its parent element.
The vertical position, in pixels, at which the Flexbox
instance should appear within its parent element.