Имитация медиа-запроса во Framer X

Сделать элементы скрытыми или отображаемыми для определенных точек останова устройства

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

@media only screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

Когда мы создаем адаптивный дизайн во Framer X, его функция адаптивного макета позволяет нам настроить поведение масштабирования для каждого элемента, чтобы дизайн реагировал в соответствии с размером кадра, в котором он содержится. вы можете управлять поведением элементов, относящихся к определенным точкам останова, прямо на панели дизайна. Чтобы установить правила на основе точек останова, вам нужно будет обратиться к функции переопределения кода или создать компонент кода.

Имитация медиа-запроса с переопределением кода

Учитывая, что вы можете переопределить стиль элемента с помощью переопределений кода. Если вы можете определить размер области просмотра, вы можете установить для видимости элементов значение «Нет». Ниже приведен пример

export const HiddenBelowViewport768: Override = () => {
   const viewPortWidth = window.innerWidth;
   if (viewPortWidth < 768) {
      return {
        opacity: 0
      }
   }
}

Компонент кода медиа-запроса

Другой подход - создать компонент со свойствами медиа-запроса, который позволяет нам устанавливать диапазон точек останова и подключаться к фрейму контента.

Ниже приведен код компонента:

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
type Props = { viewPortMin: number, viewPortMax: number };

export class BreakPointFrame extends React.Component<Props> {
render() {
   const viewPortSize = window.innerWidth;
   if (viewPortSize > this.props.viewPortMin && viewPortSize <    this.props.viewPortMax) {
   return <div style={style}>{this.props.children}</div>;
   } else {
      return null
   }
}
static defaultProps: Props = {
   viewPortMin: 320,
   viewPortMax: 1200
};
static propertyControls: PropertyControls<Props> = {
   viewPortMin: { type: ControlType.Number, title: "Min Point" },
   viewPortMax: { type: ControlType.Number, title: "Max Point" }
};
}
const style: React.CSSProperties = {
   display: "block",
   background: "rgba(136, 85, 255, 0.1)",
};

Вот ссылка на опубликованный компонент, если вы хотите установить и использовать. Https://store.framer.com/package/pchen/breakpoint-frame

Идти дальше

Подход следующего уровня - это фактическое использование медиа-запроса в определении CSS компонента кода. Можно создать более расширенное меню настроек, чтобы задать медиа-запрос, или вы также можете напрямую редактировать поведение в редактировании компонента кода.

Не стесняйтесь комментировать, если у вас есть лучший подход к созданию адаптивного шаблона дизайна, такого как медиа-запрос во Framer X.