Адаптивный дизайн в компонентах

Адаптивный дизайн в компонентах Polymer реализуется через сочетание веб-компонентов, CSS Custom Properties и медиазапросов. Polymer позволяет создавать изолированные, переиспользуемые элементы, которые автоматически подстраиваются под различные размеры экрана и устройства.

Создание адаптивного веб-компонента

Каждый веб-компонент в Polymer определяется с помощью класса, наследующегося от PolymerElement, и шаблона, оформленного в <template>. Для адаптивности ключевым элементом является использование стилей, зависящих от ширины контейнера или окна.

Пример базовой структуры компонента:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class ResponsiveCard extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
          padding: 16px;
          box-sizing: border-box;
        }
        .card {
          border: 1px solid var(--card-border-color, #ccc);
          border-radius: 8px;
          padding: 16px;
          background-color: var(--card-background-color, #fff);
          transition: all 0.3s ease;
        }
        @media (max-width: 600px) {
          .card {
            padding: 8px;
            font-size: 14px;
          }
        }
      </style>

      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('responsive-card', ResponsiveCard);

Особенности адаптивности в этом примере:

  • @media (max-width: 600px) изменяет стили при уменьшении ширины экрана.
  • Используются CSS Custom Properties --card-border-color и --card-background-color для лёгкой кастомизации.
  • transition обеспечивает плавное изменение стилей при изменении размеров окна.

Использование CSS Custom Properties и mixins

Polymer поддерживает динамическое применение стилей через CSS Custom Properties и mixins. Это позволяет централизованно управлять цветами, размерами и шрифтами компонентов, обеспечивая согласованность дизайна на разных устройствах.

Пример применения:

:root {
  --card-background-color: #f9f9f9;
  --card-border-color: #ddd;
  --card-padding: 16px;
}

responsive-card {
  --card-background-color: #e0f7fa;
  --card-padding: 24px;
}

Компоненты автоматически подстраиваются под новые значения свойств без необходимости изменения кода компонента.

Медиазапросы внутри Shadow DOM

Shadow DOM изолирует стили компонента, поэтому медиазапросы следует писать внутри шаблона компонента. Это позволяет компоненту корректно реагировать на размеры контейнера, а не только окна браузера.

:host {
  display: block;
}
@media (min-width: 800px) {
  :host {
    max-width: 800px;
    margin: 0 auto;
  }
}

Использование :host позволяет задавать стили корневому элементу компонента и обеспечивать адаптивность без внешнего вмешательства.

Динамическая подстройка через JavaScript

Иногда адаптивность требует динамического изменения структуры или поведения компонента. В Polymer это реализуется через наблюдаемые свойства (@property) и слушатели изменений размеров.

Пример:

static get properties() {
  return {
    screenWidth: {
      type: Number,
      value: window.innerWidth,
      observer: '_screenWidthChanged'
    }
  };
}

connectedCallback() {
  super.connectedCallback();
  window.addEventListener('resize', () => {
    this.screenWidth = window.innerWidth;
  });
}

_screenWidthChanged(width) {
  if (width < 600) {
    this.style.fontSize = '14px';
  } else {
    this.style.fontSize = '16px';
  }
}

Преимущества такого подхода:

  • Компонент может менять не только стили, но и структуру или функциональность.
  • Реагирует на любые изменения размера, а не только на стандартные точки медиазапросов.

Взаимодействие с Flexbox и Grid

Polymer отлично сочетается с современными CSS-моделями Flexbox и Grid, что облегчает построение адаптивных макетов:

<style>
  :host {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
</style>

<responsive-card>Контент 1</responsive-card>
<responsive-card>Контент 2</responsive-card>
<responsive-card>Контент 3</responsive-card>
  • auto-fill и minmax позволяют автоматически адаптировать количество колонок под ширину контейнера.
  • gap обеспечивает равномерные отступы между компонентами без использования внешних обёрток.

Адаптивные слоты и контент

Polymer поддерживает <slot> для распределения контента внутри компонента. Для адаптивности можно использовать разные слоты с условиями отображения через CSS или Jav * aScript:

<slot name="desktop"></slot>
<slot name="mobile"></slot>

<style>
  ::slotted([slot="desktop"]) { display: block; }
  ::slotted([slot="mobile"]) { display: none; }

  @media (max-width: 600px) {
    ::slotted([slot="desktop"]) { display: none; }
    ::slotted([slot="mobile"]) { display: block; }
  }
</style>

Такой подход позволяет предоставлять разный контент для мобильных и десктопных устройств без дублирования кода компонента.

Интеграция с CSS Variables для темизации

Комбинация адаптивного дизайна и темизации через CSS Variables обеспечивает гибкость интерфейса. Например, можно менять цвета, шрифты и размеры для мобильной и десктопной версии:

:host {
  --font-size: 16px;
  font-size: var(--font-size);
}
@media (max-width: 600px) {
  :host {
    --font-size: 14px;
  }
}

Это позволяет управлять внешним видом компонентов централизованно, сохраняя адаптивность и консистентность.

Polymer предоставляет полный набор инструментов для построения гибких, адаптивных компонентов, которые корректно отображаются на любых устройствах, поддерживают кастомизацию через CSS Variables, медиазапросы и динамическое поведение через свойства и события. Комбинация этих подходов позволяет создавать современные интерфейсы с минимальным дублированием кода и высокой переиспользуемостью компонентов.

Оглавление