Viog UI

气泡框 bubble 待优化 待新增

简单的气泡框

使用说明

简单引入

bubble气泡框触发元素需放置在默认插槽在，而展示内容放置在content插槽中

展开代码
<vi-bubble>
    <vi-button color="red">气泡提示</vi-button>
    <template v-slot:content>
        快来看看我呀！
    </template>
</vi-bubble>

气泡框标题

通过title属性向气泡框绑定标题

气泡提示
展开代码
<vi-bubble title="我是标题" style="--vi-bubble-width: 200px;">
    <vi-tag>气泡提示</vi-tag>
    <template v-slot:content>
        这是一个tag，通过气泡框你可以解释一些东西
    </template>
</vi-bubble>

暗色气泡

通过dark属性，将气泡变为暗色系

新冠
展开代码
<vi-bubble title="我是标题" style="--vi-bubble-width: 200px;">
    <vi-tag>气泡提示</vi-tag>
    <template v-slot:content>
        这是一个tag，通过气泡框你可以解释一些东西
    </template>
</vi-bubble>

气泡方向

通过direciton属性修改气泡方向（top，left，down，right），默认为down

展开代码
<vi-bubble direction="left">
    <vi-button>左</vi-button>
    <template v-slot:content>
        这是一段内容
    </template>
</vi-bubble>
<vi-bubble direction="top">
    <vi-button>上</vi-button>
    <template v-slot:content>
        这是一段内容
    </template>
</vi-bubble>
<vi-bubble direction="down">
    <vi-button>下</vi-button>
    <template v-slot:content>
        这是一段内容
    </template>
</vi-bubble>
<vi-bubble direction="right">
    <vi-button>右</vi-button>
    <template v-slot:content>
        这是一段内容
    </template>
</vi-bubble>

触发方式

通过trigger属性修改触发气泡的方式

展开代码
<vi-bubble>
    <vi-button color="red">hover</vi-button>
    <template v-slot:content>
        快来看看我呀！
    </template>
</vi-bubble>
<vi-bubble trigger="click">
    <vi-button color="red">click</vi-button>
    <template v-slot:content>
        快来看看我呀！
    </template>
</vi-bubble>

Props

属性名描述类型默认值

插槽

插槽名描述有无默认内容

css变量

变量名描述默认值