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>

属性


属性类型必填默认值说明
valuestring'AppIconDefault'
fontSizenumber32IconElement字体大小。
paddingWidthnumber2IconElement内边距。
iconButtonbooleanfalse是否以图标按钮样式呈现。
borderRadiusnumber6图标按钮圆角。
themestring'global'主题样式。支持 globallightdarksystemcustom
disabledbooleanfalse参见组件的 disabled 选项。
langstring"global"参见组件的 lang 选项。

事件


事件名参数说明
clickeventButton onclick

MIT Licensed