1.3.1 • Published 3 years ago
@coddicat/vue-hexagon v1.3.1
vue-hexagon
Vue component to render div element as hexagon with inner content
example:
https://vue-hexagon.coddicat.com/
Installation
npm i @coddicat/vue-hexagon
Usage
template:
<Hexagon
@click="onClick"
@mouseover="onMouseEvent"
:size="150"
:border-size="3"
:background-image="`url(https://picsum.photos/id/20/100/100)`"
border-color="#f00"
class="hexagon-custom"
>
<span style="color: #f0f">Inner Text</span>
</Hexagon>
type script:
import { Component, Vue } from "vue-property-decorator";
import Hexagon from "@coddicat/vue-hexagon";
@Component({
name: "HexagonExample",
components: {
Hexagon
}
})
export default class HexagonExample extends Vue {
public onClick(e: any): void {
console.log(e);
},
public onMouseEvent(e: MouseEvent): void {
console.log(e);
}
}
Props
name | required | description | default |
---|---|---|---|
borderSize | no | border width in px | 1.5 |
borderColor | no | border color | black |
size | no | width & height in px | 100 |
backgroundColor | no | background color | white |
backgroundImage | no | content image | empty |
contentStyle | no | css style (not border) | empty |
contentClass | no | css class (not border) | empty |
Events
- click
- mousedown
- mouseup
- mousewheel
- mousemove
- mouseenter
- mouseover
- mouseleave
- mouseout