Props
Props are settings to configure on a component instance. Variant groups and slots are types of props on a component.
Besides variants and slots, you can take any element in the component and expose its non-style attributes as props.
For instance, let’s say you have a User Card component, and you want to pass some user data into each instance of the component.
You could expose a bunch of slots to fill in the user’s name, bio, profile, links, etc., as well as expose variants controlling whether the user is shown as a staff user, new user, etc. But you’d need to fill this in per component.
A more scalable approach is to expose a single prop, user data, that takes in some JSON object of the user’s data.
This data likely may be queried straight from some database or API.
Then you can just pass in that one chunk of data,
and then from within the component,
you can have your various elements wired up to the prop (using dynamic values).
For another example, if you have a “Labeled Input” component containing an input textbox, you can expose the “placeholder” as a prop of the “Labeled Input” component, so that each instance of “Labeled Input” can specify its own placeholder.
Adding props
There are two ways to add props:
-
Say you just want to expose an existing prop on an element in your component. For instance, your User Card component contains an image, and you want to expose that image’s source as its prop, so that any instance of User Card can set the image. You can right-click that prop and “Link” it as a prop on the outer component. Now all User Card instances will have an image prop.
-
You can directly add custom props, of varying types, to your component. Add these from the Component Data tab in the right sidebar. You can specify what type it is there, such as text, image, or data.