... | @@ -132,3 +132,27 @@ _Spacing:_ |
... | @@ -132,3 +132,27 @@ _Spacing:_ |
|
|
|
|
|
|
|
|
|
Этот раздел отвечает за CSS-классы, которые предоставляет Quasar Framework для упрощения работы с отступами и внутренними полями элементов DOM или компонентов. Все опции префиксированы q- и затем разбиваются на тип (T), направление (D) и размер (S). На странице приведена таблица со всеми возможными комбинациями. Классы можно использовать как переменные Sass/SCSS в CSS-коде или непосредственно как CSS-классы в HTML-шаблонах. Например, класс q-pa-sm задает небольшой отступ во всех направлениях, а класс q-mt-md q-mr-sm задает средний отступ сверху и небольшой отступ справа для компонента q-card. Кроме того, при включении опции cssAddon в quasar.config.js > framework > cssAddon: true, Quasar предоставляет версии всех CSS-классов, связанных с отступами, которые учитывают точки останова, что делает их адаптивными.
|
|
Этот раздел отвечает за CSS-классы, которые предоставляет Quasar Framework для упрощения работы с отступами и внутренними полями элементов DOM или компонентов. Все опции префиксированы q- и затем разбиваются на тип (T), направление (D) и размер (S). На странице приведена таблица со всеми возможными комбинациями. Классы можно использовать как переменные Sass/SCSS в CSS-коде или непосредственно как CSS-классы в HTML-шаблонах. Например, класс q-pa-sm задает небольшой отступ во всех направлениях, а класс q-mt-md q-mr-sm задает средний отступ сверху и небольшой отступ справа для компонента q-card. Кроме того, при включении опции cssAddon в quasar.config.js > framework > cssAddon: true, Quasar предоставляет версии всех CSS-классов, связанных с отступами, которые учитывают точки останова, что делает их адаптивными.
|
|
|
|
|
|
|
|
|
|
|
|
_Shadows:_
|
|
|
|
|
|
|
|
|
|
|
|
Этот раздел отвечает за добавление теней для создания эффекта глубины/высоты. Тени соответствуют спецификациям Material Design (24 уровня глубины). На странице приведены CSS-классы, которые можно использовать для добавления теней, а также таблица со всеми возможными комбинациями. Классы можно использовать как переменные Sass/SCSS в CSS-коде или непосредственно как CSS-классы в HTML-шаблонах. Кроме того, на странице есть информация о том, как изменить цвет теней, созданных с помощью классов shadow-n, используя переменную Sass $shadow-color.
|
|
|
|
|
|
|
|
|
|
|
|
_Breakpoints:_
|
|
|
|
|
|
|
|
|
|
|
|
Этот раздел отвечает за CSS-точки останова, которые используются в Quasar Framework для управления отзывчивым дизайном. Quasar использует следующие точки останова CSS: Extra Small (0px - 599.99px), Small (600px - 1023.99px), Medium (1024px - 1439.99px), Large (1440px - 1919.99px) и Extra Large (1920px - Infinity). Эти точки останова можно использовать как переменные Sass/SCSS в CSS-коде или непосредственно как CSS-классы в HTML-шаблонах. На странице также есть информация о том, как использовать эти точки останова, а также ссылки на другие разделы, такие как Visibility и Introduction to Flexbox, которые могут быть полезны при работе с отзывчивым дизайном.
|
|
|
|
|
|
|
|
|
|
|
|
_Body classes:_
|
|
|
|
|
|
|
|
|
|
|
|
Этот раздел отвечает за CSS-классы, которые Quasar Framework добавляет к элементу document.body. Эти классы могут быть использованы для определения различных свойств клиента, таких как наличие поддержки сенсорного экрана, тип устройства (мобильное или настольное), наличие темной темы и т.д. На странице приведены все возможные классы и их описание. Классы можно использовать как переменные Sass/SCSS в CSS-коде или непосредственно как CSS-классы в HTML-шаблонах. Эти классы могут быть полезны при написании CSS-стилей, которые зависят от свойств клиента.
|
|
|
|
|
|
|
|
|
|
|
|
_Visibility:_
|
|
|
|
|
|
|
|
|
|
|
|
Этот раздел отвечает за CSS-классы, которые предоставляет Quasar Framework для управления видимостью компонентов и элементов DOM в зависимости от размера экрана. На странице приведены все возможные классы и их описание. Классы можно использовать как переменные Sass/SCSS в CSS-коде или непосредственно как CSS-классы в HTML-шаблонах. Кроме того, на странице есть информация о том, как использовать эти классы в сочетании с другими классами Quasar, а также ссылки на другие разделы, такие как Introduction to Flexbox, которые могут быть полезны при работе с отзывчивым дизайном. |
|
|
|
\ No newline at end of file |