Skip to content

IconElement-DEMO ​


IconElement-Positions ​


Left, Right

vue
<fv-IconElement :value="positionH"></fv-IconElement>

Top, Bottom

vue
<fv-IconElement :value="positionV"></fv-IconElement>

Top-left, Top-right, Bottom-left, Bottom-right

vue
<fv-IconElement :value="positionsFour"></fv-IconElement>
javascript
positionH: [
    {
        name: "Dial1",
        position: 'left'
    },
    {
        name: "Dial2",
        position: 'right'
    }
],
positionV: [
    {
        name: "Dial3",
        position: 'top'
    },
    {
        name: "Dial4",
        position: 'bottom'
    }
],
positionsFour: [
    {
        name: "Dial5",
        position: 'top-left'
    },
    {
        name: "Dial6",
        position: 'top-right'
    },
    {
        name: "Dial7",
        position: 'bottom-left'
    },
    {
        name: "Dial8",
        position: 'bottom-right'
    }
]

IconElement-Icon Button ​


vue
<fv-IconElement :value="heart" :iconButton="true" :paddingWidth="3"></fv-IconElement>

Properties ​


PropertyTypeRequiredDefaultDescription
valuestringNo'AppIconDefault'
fontSizenumberNo32See the IconElement fontSize option.
paddingWidthnumberNo2See the IconElement paddingWidth option.
iconButtonbooleanNofalseSee the IconElement iconButton option.
borderRadiusnumberNo6See the IconElement borderRadius option.
themestringNo'global'Theme style. Supports global, light, dark, system, and custom.
disabledbooleanNofalseSee the IconElement disabled option.
langstringNo"global"See the IconElement lang option.

Events ​


EventArgumentsDescription
clickeventButton onclick

MIT Licensed