Стиль виджеты доджо

Есть целый учебник по додзё на Создание пользовательских тем , и если вы посмотрите на какие -либо руководства по созданию виджетов, вы узнаете, как создавать модули CSS для использования с вашими виджетами и приложениями.

Но как насчет, если вы хотите использовать некоторые из Виджеты из ящика с додзё? Существует целая библиотека готовых к использованию виджетов, которые вы можете начать создавать для своих приложений сегодня. Мы видели это, когда создали DatePicker и есть даже виджеты, как Выбрать и кнопка . Проверьте Виджет витрина для большего!

Если вы просто хотите быстро приступить к работе с красивой темой, вы можете использовать Тема Додзё Анкет Я расскажу о том, как создать свои собственные темы в другой раз, но сейчас давайте предположим, что у вас есть виджет Dojo в вашем приложении, и вам действительно нравится тема Dojo, но вы хотели бы немного внести некоторые настройки. Недостаточно, чтобы гарантировать пользовательскую тему, но, возможно, добавьте немного курсивого шрифта, измените фон здесь и там.

Dojo предоставляет способ сделать это в CSS -модули дружелюбная манера. Каждый виджет имеет раздел в своей документации на классах CSS, которые вы можете переопределить, например, в Выберите виджет Анкет Чтобы начать, давайте добавим тему Dojo в этот виджет.

import theme from "@dojo/themes/dojo";
...

// in your render method

На данный момент вы можете использовать красивую тему, предоставленную Dojo. Однако, возможно, я хотел бы, чтобы текст заполнителя был курсивом, и я хотел бы немного изменить цвет фона кнопки и некоторые другие цвета. Я не хочу много менять, лишь несколько вещей.

.arrow {
  background: #959595;
  color: #fff;
}

.focused {
  color: #005e95;
}

.placeholder {
  font-style: italic;
}

.inputWrapper {
  color: #6e6e6e;
}

Теперь у меня есть несколько простых CSS, которые соответствуют именам классов в документация . Теперь вы можете применить эти имена классов к вашему виджету Select, используя простой старый объект JavaScript, который отобразит дополнительные классы с ключом виджета. Вы можете увидеть больше деталей Здесь Анкет

const SelectClasses = {
  "@dojo/widgets/select": {
    arrow: \[css.arrow\],
    focused: \[css.focused\],
    placeholder: \[css.placeholder\],
    inputWrapper: \[css.inputWrapper\]
  }
};

// in your render method

Теперь это будет поддерживать тему Dojo, которую вы уже используете, но также применяют классы, которые вы добавляете виджет. Вы получаете приложение, которое выглядит примерно как ниже.

Как вы можете видеть, не требуется много работы, чтобы использовать предоставленную тему Dojo с вашими приложениями и применять свой собственный маленький сахар CSS к виджетам Dojo вне коробки. Вы также можете сделать этот шаг дальше и создать свой собственный Пользовательская тема для вашего приложения и даже многоразовая тема Для набора приложений! Счастливого дева!

Обязательно Подпишитесь на информационный бюллетень И будьте в курсе последнего контента!

Оригинал: “https://dev.to/odoenet/style-dojo-widgets-4bb4”