Документация Engee

Настройка стиля приложений Genie

Каскадные таблицы стилей (CSS) — это язык настройки стиля HTML-документов, позволяющий разработчикам отделять дизайн от содержимого. CSS улучшает веб-сайты за счет визуально привлекательных макетов, сокращения времени загрузки, адаптивного дизайна и совместимости с различными браузерами.

В приложении Genie можно использовать встроенные атрибуты стилей CSS или определять собственные таблицы стилей в папке public/, а затем импортировать их следующим образом:

Stipple.Layout.add_css("froop.css", "bootstrap.css")

Собственные стили, написанные в public/css/genieapp.css, автоматически импортируются на страницу приложения. Более того, можно также использовать предварительно определенные классы из фреймворка Quasar.

Вот пример страницы, на которой используется несколько стилей и классов CSS:

 [h1(class="blue-text", "Heading"),
 p(style="color: green; background: cyan", "Inline styled paragraph."),
 p(class="red-text","Paragraph with class.")]

Классы определены в файле public/css/genieapp.css, а конкретные элементы выбираются с помощью селекторов:

/* Class Selector */
.red-text {
  color: red;
}

/* Element Selector */
p {
  font-size: 14px;
}

/* Class Selector */
.blue-text {
  color: blue;
}

Использование классов Quasar

Компоненты Quasar имеют собственные предварительно определенные классы CSS. Эти классы добавляются к элементам HTML для настройки стиля макета, отступов и многого другого. Например, класс q-pa-sm добавляет небольшой внутренний отступ в элемент, а класс col-12 задает ширину столбца в макете сетки из 12 столбцов:

cell(class="q-pa-sm col-12",
    p("This paragraph has small padding and takes the full width of the container."))

Полный список доступных классов см. в официальной документации Quasar: Вспомогательные средства CSS для Quasar.

Использование Tailwind CSS

Tailwind CSS — это популярный фреймворк, предоставляющий набор служебных классов для настройки стиля страницы. С его помощью можно настраивать практически каждый аспект дизайна приложения без необходимости определять собственные таблицы стилей. Список доступных классов см. на этой странице. Чтобы использовать Tailwind, включите необходимый код JavaScript:

Stipple.Layout.add_script("https://cdn.tailwindcss.com")

Вот предыдущий пример с использованием классов Tailwind:

cell(class="p-4 w-full bg-blue-100 border border-blue-200 rounded shadow",
    p(class="text-blue-800 font-semibold", "This paragraph has moderate padding, a blue background, a rounded border, and a shadow, taking the full width of the container."))