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

Примечание редактора. Мы внесли несколько серьезных изменений во Framer, и в этой статье говорится о устаревшем инструменте. Узнайте больше о том, что такое Framer сегодня →

Во Framer X мы ввели компоненты кода, повторно используемые элементы, которые можно программировать с нуля на основе React. Вы можете создать свои или установить их из Магазина. В этих компонентах вы можете определять свои собственные свойства и позволять другим настраивать их по своему вкусу. По сути, это позволяет вам взломать пользовательский интерфейс Framer и создать собственную панель свойств. В этом посте я расскажу обо всех поддерживаемых элементах управления свойствами, о том, как они работают, и предоставлю вам образцы для начала. Давайте начнем.

Компоненты

Итак, вы готовы приступить к созданию собственных компонентов кода. Вы можете сделать это, щелкнув значок Компоненты на левой панели. Затем нажмите Создать и выберите Из кода. Это откроет ваш редактор кода по умолчанию. Если у вас их нет, могу порекомендовать Visual Studio Code. Альтернативы включают Атом и Возвышенный текст. Компонент кода по умолчанию очень прост и предоставляет только одно свойство: Text. Прежде чем мы углубимся в свойства, давайте сначала кратко рассмотрим основы.

  • Импорт. Это просто импортирует элементы из включенных библиотек, таких как React и Framer. Нам также понадобятся кое-что из библиотеки Framer, например PropertyControls и ControlType.
  • Стиль. Это объект, который включает в себя набор объявлений стилей CSS, хранящихся в константе. Просто стиль по умолчанию.
  • Интерфейс. Это TypeScript. Во Framer X использование TypeScript необязательно, но рекомендуется. Он позволяет назначать типы свойствам, например string или number.
  • Класс. Экспортированный class - это то место, где мы определяем наш фактический компонент. Он включает в себя имя, интерфейс свойств (Props), наши значения свойств по умолчанию (defaultProps), наши открытые элементы управления свойствами (propertyControls) и функцию render(), которая определяет, что мы фактически будем визуализировать (отображать) на холсте.

Большой. Разобравшись с этим, давайте перейдем к мелочам.

Элементы управления

Статический propertyControls определяет, что будет отображаться на панели свойств во Framer X. В компоненте кода по умолчанию это выглядит так:

static propertyControls: PropertyControls = {
  text: { 
    type: ControlType.String, 
    title: "Text" 
  }
};

Ввод PropertyControls необходим, чтобы Framer X обнаружил это. Внутри объекта мы можем дать свойству любое желаемое имя (здесь это текст), а затем передать объект, который обычно всегда должен включать type и title. type определяет тип элемента управления, а title определяет заголовок, который будет отображаться на панели свойств.

Ниже вы найдете список всех доступных элементов управления свойствами, включая краткое описание. Если вы предпочитаете учиться на практике, я также сделал пример, который включает все элементы управления свойствами и отображает их результат на холсте. Вы можете взять его из Магазина и щелкнуть правой кнопкой мыши эскиз на панели «Компоненты», чтобы скопировать код. Или вы также можете загрузить исходный файл Props.tsx и включить его в папку code вашего проекта (нажмите CMD + Option + P, чтобы открыть папку проекта).

Пример собственности

Отличная отправная точка для вашего следующего компонента кода.

Все типы

Текст
Строка, которая может содержать любое текстовое значение. Отображается как поле ввода. Содержит необязательное свойство placeholder.

static propertyControls: PropertyControls = {
  text: { 
    type: ControlType.String, 
    title: "Text", 
    placeholder: "Framer X" 
  }
}

Цвет
Строка, которая может содержать любое значение цвета в цветовых пространствах HEX, RGB и HSL. Отображается как средство выбора цвета и элемент управления числовым вводом, позволяющий управлять значением alpha.

static propertyControls: PropertyControls = {
  color: { 
    type: ControlType.Color, 
    title: "Color" 
  }
}

Логическое
Логическое значение true или false. Отображается как сегментированный элемент управления. По умолчанию в сегментированном элементе управления отображаются заголовки True и False, но их можно настроить с помощью enabledTitle и disabledTitle.

static propertyControls: PropertyControls = {
  boolean: { 
    type: ControlType.Boolean, 
    title: "Boolean",
    enabledTitle: "True",
    disabledTitle: "False"
  }
}

Число
Одно числовое значение. Отображается как поле ввода рядом с ползунком. Содержит необязательные значения min, max, step и unit. Для свойства unit можно задать значение %, чтобы вместо этого поле ввода отображалось в процентилях.

static propertyControls: PropertyControls = {
  number: { 
    type: ControlType.Number, 
    title: "Number",
    min: 0,
    max: 100,
    step: 1
  }
}

Изображение
Файл изображения. Отображается как средство выбора изображения и небольшой предварительный просмотр изображения.

static propertyControls: PropertyControls = {
  image: { 
    type: ControlType.Image, 
    title: "Image"
  }
}

Файл
Любой файл. Отображается с помощью средства выбора файлов, которое отображает имя файла после выбора. Содержит свойство optionalFileTypes, которое принимает массив строк, например [“png”, “jpg”].

static propertyControls: PropertyControls = {
  file: { 
    type: ControlType.File, 
    title: "File",
    allowedFileTypes: ["png", "jpg"]
  }
}

Enum
Выбор параметров. Отображается в виде раскрывающегося списка. Содержит свойство options, которое принимает массив строк в качестве фактических параметров, и необязательное свойство optionTitles, которое также принимает массив строк и определяет, как параметры будут отображаться в пользовательском интерфейсе.

static propertyControls: PropertyControls = {
  enum: { 
    type: ControlType.Enum, 
    title: "Enum",
    options: ["A", "B", "C"],
    optionTitles: ["Option A", "Option B", "Option C"]
  }
}

SegmentedEnum
Ограниченный набор параметров. Отображается как сегментированный элемент управления (переключатель). Содержит свойство options, которое принимает массив строк в качестве фактических параметров, и необязательное свойство optionTitles, которое также принимает массив строк и определяет, как параметры будут отображаться в пользовательском интерфейсе. Это будет работать максимум с ~ 3/4 опциями. Для 4+ вариантов я бы рекомендовал вместо этого использовать элемент управления Enum.

static propertyControls: PropertyControls = {
  segment: { 
    type: ControlType.SegmentedEnum, 
    title: "Segment",
    options: ["A", "B", "C"],
    optionTitles: ["A", "B", "C"]
  }
}

FusedNumber
Одно числовое значение или набор из 4 числовых значений, каждое из которых представляет сторону (верхнюю, правую, нижнюю, левую) объекта. Он был разработан для таких свойств, как border-radius, border-width и padding. Отображается как элемент управления вводом вместе с сегментированным элементом управления, который позволяет переключаться между элементами управления со всех сторон или с определенной стороны.

static propertyControls: PropertyControls = {
  fused: { 
    type: ControlType.FusedNumber, 
    title: "Fused",
    toggleKey: "fusedPerSide",
    toggleTitles: ["All Sides", "Per Side"],
    valueKeys: [
      "fusedTop", 
      "fusedRight", 
      "fusedBottom", 
      "fusedLeft"
    ],
    valueLabels: ["T", "R", "B", "L"],
    min: 0,
  }
}

Вот и все! Мне не терпится увидеть, что вы создадите и опубликуете в Framer X Store. Если вы чувствуете, что сделали что-то отличное и хотели бы, чтобы вас упомянули, пожалуйста, не стесняйтесь упомянуть меня в Twitter, я бы с удовольствием посмотрел.