Есть ли простой способ изменить значение по умолчанию для реквизита, «обрисованного в общих чертах» для всех «v-текстовых полей» во введенном проекте?
https://vuetifyjs.com/en/components/text-fields
Набор Vuetify по умолчанию для всех v-текстовых полей
24.01.2020
Ответы:
1
Нет необходимости в нестандартном компоненте
По умолчанию v-text-field использует основной цвет вашего приложения.
Изменить цвет контура одного v-текстового поля
Если вы хотите изменить цвет контура одного v-text-field , когда он сфокусирован, вы можете просто использовать color опору.
<v-text-field
outlined
color="red"
/>
Измените основной цвет вашего приложения
Это изменит цвет всех v-text-field , когда они сфокусированы:
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'
}
}
}
})
Изменить цвет всего v-текстового поля (сфокусировано или нет)
Теперь, если вы хотите изменить цвет контура, даже если элемент не сфокусирован, вы можете использовать API переменных SASS.
Если вы установили Vuetify через Vue CLI, создайте файл src/scss/variables.scss:
$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;
Таким образом, у вас будет полный контроль как над сфокусированным, так и над исходным состоянием. В приведенном выше примере контуры становятся светлее, а ширина сфокусированного контура уменьшается до 1 пикселя;
25.05.2021
2
Вы можете создать компонент-оболочку и extends из VTextField (см. treehaking) и настройте значения по умолчанию.
import Vue from 'vue';
import { VTextField } from 'vuetify/lib';
Vue.component('TextFieldOutlined', {
extends: VTextField,
props: {
outlined: {
type: Boolean,
default: true
}
}
})
Используя это как:
<text-field-outlined
label="Some label"
clearable
dense>
</text-field-outlined>
FWIW, расширение компонента означает, что все свойства базового компонента передаются и, следовательно, могут использоваться в равной степени.
24.01.2020
Новые материалы
Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек.
Каждой..
Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример:
Связь клиент-сервер
Мы..
Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...