默认情况下为所有 v-text-field 概述的 Vuetify 集 [英] Vuetify set outlined for all v-text-field by default

问题描述

是否有简单的方法可以更改输入项目中所有v-text-field"的概述"道具的默认值?

解决方案

无需自定义组件

默认情况下，v-text-field 使用应用程序的原色.

更改单个 v-text-field 的轮廓颜色

如果你想改变单个v-text-field 聚焦时的轮廓颜色，你可以简单地使用color道具

更改应用的主要颜色

这将改变所有 v-text-field 聚焦时的颜色:

从 'vue' 导入 Vue从vuetify/lib/framework"导入 VuetifyVue.use(Vuetify)导出默认的新 Vuetify({主题: {选项: {自定义属性:true},主题:{光: {主要:'#5E72E4'}}}})

更改所有 v-text-field 的颜色(是否有焦点)

现在，如果你想在元素没有聚焦的情况下改变轮廓的颜色，你可以使用 SASS 变量 API.

如果您通过 Vue CLI 安装了 Vuetify，请创建一个 src/scss/variables.scss 文件:

$material-light: ( 'text-fields': ('填充':rgba(0, 0, 0, 0.06),'填充悬停':rgba(0, 0, 0, 0.12),'概述':rgba(0, 0, 0, 0.2),'outlined-disabled': rgba(0, 0, 0, 0.1),'outlined-hover': rgba(0, 0, 0, 0.4)));$text-field-outlined-fieldset-border: 1px 实心 currentColor;

这样您就可以完全控制焦点状态和初始状态.上面的例子使轮廓更亮，将聚焦的轮廓宽度缩小到1px；

Is there are simple way to change default value of props "outlined" for all "v-text-field" across entered project?

https://vuetifyjs.com/en/components/text-fields

解决方案

No need for custom component

By default, the v-text-field uses the primary color of your application.

Change outline color of a single v-text-field

If you want to change the outline color of a single v-text-field when it's focused, you can simply use the color prop.

<v-text-field
  outlined
  color="red"
/>

Change the primary color of your app

This will change the color of all v-text-field when they are focused:

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    options: {
      customProperties: true
    },
    themes: {
      light: {
        primary: '#5E72E4'
      }
    }
  }
})

Change the color of all v-text-field (focused or not)

Now, if you want to change the color of the outline even if the element is not focused, you can use the SASS variable API.

If you installed Vuetify via Vue CLI, create a src/scss/variables.scss file:

$material-light: ( 'text-fields': (
  'filled': rgba(0, 0, 0, 0.06),
  'filled-hover': rgba(0, 0, 0, 0.12),
  'outlined': rgba(0, 0, 0, 0.2),
  'outlined-disabled': rgba(0, 0, 0, 0.1),
  'outlined-hover': rgba(0, 0, 0, 0.4)
));

$text-field-outlined-fieldset-border: 1px solid currentColor;

This way you have full control over both, focused and initial state. The example above makes outlines lighter and reduce the focused outline width to 1px;

这篇关于默认情况下为所有 v-text-field 概述的 Vuetify 集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！