Viog UI

页头 header 待优化

页面头部

使用说明

简单引入

如头部所示，这是一个flex盒子，你可以随意订制内部元素

该组件会在原地留下一个同样高度的盒子！！！所以希望该组件在使用时应放置在最顶部

align属性控制盒子的align-items，justify属性控制盒子的justify-items

其默认分别为space-between和center

首页
组件
更新日志
展开代码
<vi-header>
    <div class="header__logo">
      <img src="../../.vuepress/public/img/logo.png"/>
    </div>
    <vi-nav class="header__nav">
        <vi-nav-item class="header__nav__item">首页</vi-nav-item>
        <vi-nav-item class="header__nav__item">组件</vi-nav-item>
        <vi-nav-item class="header__nav__item">更新日志</vi-nav-item>
    </vi-nav>
</vi-header>

<style>
.header__logo {
    width: 30px;
    height: 30px;
}

.header__logo > img {
    object-fit: cover;
}

.header__nav {
    align-self: flex-end;
    --vi-nav-gap: 20px;
}

.header__nav .header__nav__item {
    padding-bottom: 3px;
}
</style>

页头自动收回

使用属性retract可以使页头自动收回

当页面再顶部时，页面出现，下滚回收，上滚出现

该属性暂时无法绑定响应式！！！

展开代码
<vi-header v-if="retract" retract>
    <div class="header__logo">
      <img src="../../.vuepress/public/img/logo.png"/>
    </div>
    <vi-nav class="header__nav">
        <vi-nav-item class="header__nav__item">首页</vi-nav-item>
        <vi-nav-item class="header__nav__item">组件</vi-nav-item>
        <vi-nav-item class="header__nav__item">更新日志</vi-nav-item>
    </vi-nav>
</vi-header>

<vi-button @click="retract = !retract">{{ retract ? '不收回效果' : '收回效果' }}</vi-button>

<script setup>
    import { ref } from 'vue'
    const retract = ref(false)
</script>

Props

属性名描述类型默认值

插槽

插槽名描述有无默认内容

可覆写css变量

变量名描述默认值