Поделиться через

Определение размера отрисоченной веб-части

  • Статья

Иногда пользовательским приложениям SharePoint Framework (SPFx) необходимо знать размер веб-части, отрисованного по разным причинам. Это значение может изменяться при просмотре веб-частей на разных устройствах, таких как настольный или мобильный браузер.

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

Функциональные возможности веб-части могут отличаться в зависимости от размера отрисоченной веб-части.

Появилась в выпуске SPFx версии 1.12, разработчики могут определять ширину отрисовываемой веб-части. Ранее единственный способ надежно определить это значение был с помощью неподдерживаемых средств, таких как проверка DOM страницы.

Получение ширины отрисоченной веб-части

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

public render(): void {
  this.domElement.innerHTML = `
    <div class="${ styles.helloWorld }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <p class="${ styles.description }">Web Part width: ${this.width}</p>
          </div>
        </div>
      </div>
    </div>`;
}

Обнаружение изменения ширины веб-части

Разработчики также могут определить, когда изменяется ширина отображаемой веб-части, обрабатывая событие:

protected onAfterResize(newWidth: number): void;

Этот API вызывается при изменении ширины элемента DOM контейнера веб-части, например при изменении размера окна браузера и при переключе области свойств.

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

protected onAfterResize(newWidth: number) {
  console.log(`the new width of the web part is ${newWidth}`);
}