vant-ui组件库中如何修改NavBar导航栏的样式

目录
  • vant-ui组件库修改NavBar导航栏的样式
    • 引用NavBar组件
  • vant组件库,修改NavBar组件的样式

vant-ui组件库修改NavBar导航栏的样式

Vant-ui组件中没有改变导航栏的样式的属性，这个时候怎么办呢

我们可以用深度选择器/deep/ 或 ::v-deep，实现对组件内部的样式修改 如下：

引用NavBar组件

<div id="div_box_nav">
  <van-nav-bar
    title="标题"
    left-text="返回"
    left-arrow
   />
  </div>

引用后是显示这个样子的 如下图：

但是现在需求是 要求导航栏背景色为蓝色 字体颜色 图标颜色都为白色

我们可以这样来修改

修改背景色这个好改写，直接拿到导航栏的属性名就可以修改

<style lass="scss" scoped>
.van-nav-bar {
  background-color: #2f97ec;
}
</style>

写完后它就变颜色了

下边来修改字体的颜色

<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-nav-bar__title {
  color: white;
  font-size: 0.45rem;
}
</style>

使用deep来通过外层大的div盒子id标识定位来穿透设置原本组件的css样式

它这个字体颜色也就改变了

最后来修改箭头图标的颜色 也是用上边这个方法

<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-icon {
  color: white;
}
</style>

最后这样也就成功可以修改原本的样式啦

vant组件库,修改NavBar组件的样式

今天在引用navbar组件的时候，发现没有像Tabbar那样能修改样式的属性，可以给

组件对应的标签去做修改，如果不能解决，那么就要使用深度选择器/deep/ 或 ::v-deep，实现对组件内部的样式修改

<van-nav-bar
    fixed
    :title="title"
    :right-text="text"
    @click-left="onClickLeft"
    @click-right="onClickRight"
    class="van-ellipsis"
  >
    <template #left>
      <van-icon color="#fff" name="search" size="23" v-show="showIcon" />
    </template>
  </van-nav-bar>

.van-nav-bar {
 background-color: rgb(241, 186, 66);
}
::v-deep .van-icon {
 color: #fff;
}
::v-deep .van-nav-bar__text {
 color: #fff;
}
::v-deep .van-ellipsis {
 color: #fff;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vant-UI库修改样式无效的问题

    最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效.css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用 vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法: 1.对于css语法起作用 使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器"深入"

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • vant-ui组件库中如何修改NavBar导航栏的样式

    目录 vant-ui组件库修改NavBar导航栏的样式 引用NavBar组件 vant组件库,修改NavBar组件的样式 vant-ui组件库修改NavBar导航栏的样式 Vant-ui组件中没有改变导航栏的样式的属性,这个时候怎么办呢 我们可以用深度选择器/deep/ 或 ::v-deep,实现对组件内部的样式修改 如下: 引用NavBar组件 <div id="div_box_nav"> <van-nav-bar title="标题" left

  • Vue中UI组件库之Vuex与虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3

  • Mpvue中使用Vant Weapp组件库的方法步骤

    一.介绍 mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑. 此教程是在dov-yih一同协助下完成.经过测试,Vant Weapp下所有组件都能够在mpvue中使用 mpvue-vant Github地址 二.使用方法 目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用. 克隆

  • 在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

    1如何引入组件库 有两种方法 1 npm下载 2 下载代码,下面介绍第二种方法. 在gitHub上, 链接如下  https://github.com/youzan/vant-weapp  首先在自己项目目录static下新建一个vant文件夹,用于存放组件文件,把dist文件夹下的所有文件拷贝到static下面的vant目录下,如下所示: 2 如何使用 1 在需要使用组件的页面所在的文件夹下新建一个页面main.json, (新建页面后必须npm run dev 才能生效)在其中引入相应的组件

  • mpvue项目中使用第三方UI组件库的方法

    mpvue项目中使用第三方UI组件库的方法

    说明 整理了一份简单的源码,放在github,有需要参考的同学自取~ 简介 微信小程序上线已有一年多时间啦,自美团的mpvue(基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月. 前端技术日新月异,小程序的UI框架也层出不穷. 例如: WeUI: 一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.(github) ZanUI: 有赞移动 Web UI 规范 ZanUI 的小

  • 详细讲解如何创建, 发布自己的 Vue UI 组件库

    详细讲解如何创建, 发布自己的 Vue UI 组件库

    前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: npm install vuetify // or yarn add vuetify 但是当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗? 这样做是很方便, 但是有两个问题: 当该 component 需要更新时, 我们需要手动维

  • 小程序组件传值和引入sass的方法(使用vant Weapp组件库)

    1.生命周期 1.onLoad():页面加载时触发,一个页面只加载一次. 2.onShow():页面显示切换的时候触发 3.onReady():页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 4.onHide():页面卸载时触发 2.小程序的框架: 小程序框架有两个层,一是视图层,一是逻辑层. 框架的视图层: 1.由 WXML 与 WXSS 编写,由组件来进行展示. 2.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. 3.WXML(WeiXi

  • React UI组件库之快速实现antd的按需引入和自定义主题

    React UI组件库之快速实现antd的按需引入和自定义主题

    目录 React UI组件库 流行的开源React UI组件库 antd的基本使用 antd样式按需引入 antd自定义主题 总结 React UI组件库 流行的开源React UI组件库 material-ui(国外) ant-design(国内蚂蚁金服) antd的基本使用 antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 安装antd组件库: npm install antd --save yarn add antd 默认按需引入

  • 如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    目录 1. 前言 2. 使用Vite搭建官网 2.1 创建项目 2.1.1. 全局安装vite(这里我装的时候是2.7.2) 2.1.2. 构建一个vue模板(项目名可以改成自己的名字) 2.1.3. 装好之后按照提示逐步执行命令 2.2 基本完成官网的搭建 2.2.1. 下载vue-router 2.2.2. 创建home首页与doc文档页 以及顶部导航栏 2.2.3. 配置路由 3. 封装一个Button组件 4. 封装Markdown组件介绍文档 4.1. 下载 4.2. main.ts中

  • 基于Vue 2.0的模块化前端 UI 组件库小结

    AT-UI 是一款基于 Vue.js 2.0 的轻量级.模块化前端 UI 组件库,主要用于快速开发 PC 网站产品. 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI 组件. 特性 基于 Vue 开发的 UI 组件 基于 npm + webpack + babel 的工作流,支持 ES2015 CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见: AT-UI Style) 提供友好的

随机推荐