Contrôles de propriété

Les contrôles de propriété permettent aux utilisateurs de passer des propriétés (ou props) à un composant de code via l'interface Framer. Lorsqu'un utilisateur sélectionne un composant de code sur le canevas, ses contrôles de propriété sont visibles sur le panneau des propriétés. Ajout de contrôles Pour donner à votre composant des contrôles de propriété, importez à la fois la addPropertyControls fonction et le ControlType type de la framer bibliothèque.

Dans cet exemple, nous ajoutons un contrôle de propriété pour la texte prop du composant. Sur le canevas, la sélection du composant affichera maintenant un contrôle qui nous permet de définir cette propriété.

import { addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  text: { 
    type: ControlType.String, 
    defaultValue: "Hello World!" 
  },
})

Masquer les contrôles

Les contrôles peuvent être masqués en ajoutant la fonction hidden à la description de la propriété. La fonction reçoit un objet contenant les propriétés définies et retourne un boolean. Dans cet exemple, nous masquons entièrement la texte propriété lorsque la propriété connectée (le toggle) est false.Vous pouvez maintenant basculer la visibilité du contrôle de propriété texte en changeant le toggle boolean dans le panneau des propriétés de Framer.

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  toggle: {
    type: ControlType.Boolean,
    title: "Toggle",
    enabledTitle: "Show",
    disabledTitle: "Hide",
  },
  text: {
    type: ControlType.String,
    title: "Text",
    hidden(props) {
      return props.toggle === false
    },
  },
})

Ajout de descriptions

Les contrôles peuvent avoir une description propriété pour ajouter de la documentation sur le contrôle dans l'interface utilisateur de Framer – elle apparaît dans le panneau des propriétés juste au-dessus du contrôle. Il prend également en charge l'ajout d'emphase et de liens en utilisant la syntaxe Markdown. Pour ajouter des sauts de ligne, utilisez le caractère de nouvelle ligne “\n”.

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  toggle: {
    type: ControlType.Boolean,
    title: "Toggle",
    description: "*On* by default",
  },
  text: {
    type: ControlType.String,
    title: "Text",
    description: "[Need inspiration?](https://www.lipsum.com)",
  },
})