Публикации по теме 'material-design'
Почему в моем проекте дублируются стили Angular Material?
В этой статье предполагается, что вы используете SCSS с Angular CLI .
Как выглядят эти повторяющиеся стили?
Вы можете увидеть стиль .mat-toolbar.mat-primary вверху. Тогда вы можете увидеть это внизу еще раз. На этот раз с теми же точными стилями ( background , color ) и значениями, но все они переопределены.
В этом примере есть только 1 повторяющийся набор стилей, но очень легко внезапно увидеть 3 повторяющихся набора или 5 или более! Как вы могли догадаться, это может..
Включение или отключение анимации во время выполнения в Angular
Анимации могут быть беспокойными для работы в некоторых сценариях. А когда дело доходит до автоматизированного тестирования с помощью таких инструментов, как Cucumber или Protractor, они могут стать проблемой.
Ниже описан подход к отключению анимации во время выполнения, который позволяет отключить ее либо для конечного пользователя, либо для ваших тестов автоматизации, чтобы сделать их более стабильными.
Сначала создайте новый файл с именем src/app/app-animate.class.ts со следующим..
Создание mdAutocomplete для фреймворка vue-material
Как всегда, я постараюсь писать как можно меньше, чтобы вы могли перейти к делу как можно скорее.
Главная идея
Общая идея состоит в том, чтобы создать компонент, который работает как автозаполнение. Последний компонент должен иметь внешний вид Material Design, а также повторно использовать компоненты vue-material. После поиска и тестирования некоторых «родных» компонентов из фреймворка я решил использовать следующее:
mdInput : mdAutocomple требует ввода; mdMenu : этот компонент..
Как отображать сообщения в приложении с помощью Material-UI в веб-приложении React
В некоторых ситуациях ваше веб-приложение должно отображать информационное сообщение, чтобы сообщить пользователям, было ли событие успешным или нет. Например, сообщение «Успех» после того, как пользователь щелкнет кнопку и успешно завершит какое-либо действие.
В этом руководстве я покажу вам, как создать простой компонент для информационных сообщений в приложении с помощью React и Material-UI. Мы назовем это Notifier компонентом.
Вот основные разделы этого руководства:
Начиная..
Vue, Storybook, TypeScript - начало нового проекта с учетом лучших практик
Vue, Storybook, TypeScript - начало нового проекта с учетом лучших практик
Мне нравится писать код на React. Это может быть странным введением в историю о Vue, но вам нужно понять мою предысторию, чтобы понять, почему я здесь обсуждаю Vue.
Мне нравится писать код React, и я ненавижу его читать. JSX - отличная идея для быстрой сборки частей, Material-UI - отличное решение для начальной загрузки пользовательского интерфейса вашего следующего стартапа, вычисление CSS из констант JS..
Вам нужна темная или светлая тема для реакции?
Это так просто!
Шаг первый yarn add @material-native-theme/theme-provider
Шаг второй определите свою тему в корневом приложении.
import React from "react";
import { ThemeProvider } from "@material-native-ui/theme-provider";
export const App = (props) => {
return (
<ThemeProvider theme={theme}>
// ...Children
</ThemeProvider>
);
}
дерево шагов Определите собственные стили
import React, { Component } from 'react'..
Как добавить пользовательский реквизит в компонент типографики Material-UI
Прежде чем мы начнем, вот конечный результат, которого мы добьемся к концу этой статьи:
✔️ Компонент типографики с настраиваемыми реквизитами fontWeight и emphasis . JavaScript React Codesandbox
В этой статье я использую JavaScript только для простоты, но я также включил версию Typescript. Тестовая среда для кодов реакции на машинописный текст
💡 Также, если вы ищете одноразовое решение, вот быстрый и простой способ переопределить font-weight с помощью компонента Box:..
