Contrôles de propriétés (Property Controls)

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

Dans cet exemple, nous ajoutons un Property Control pour la prop text du composant. Sur le canevas, la sélection du composant affichera désormais un contrôle qui nous permettra 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!" 
  },
})

import { addPropertyControls, ControlType } from "framer"

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

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

import { addPropertyControls, ControlType } from "framer"

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

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

Masquer des 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 renvoie un boolean. Dans cet exemple, nous masquons entièrement la propriété text lorsque la propriété associée (le toggle) est définie sur false.Vous pouvez désormais basculer la visibilité du contrôle de la propriété text en modifiant le booléen toggle depuis le panneau des propriétés dans 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
    },
  },
})

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
    },
  },
})

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 inclure une propriété description pour ajouter de la documentation sur le contrôle dans l'interface utilisateur de Framer — elle apparaît dans le panneau Propriétés juste au-dessus du contrôle. Elle prend également en charge la mise en valeur du texte et les liens à l'aide de la syntaxe Markdown. Pour insérer des sauts de ligne, utilisez le caractère de saut de 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)",
  },
})

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)",
  },
})

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)",
  },
})