As we learned with components and dug into a little bit with placeholder components, components can’t take what slotted children but we can do a one-for-one swap. But what if we want to swap in more than one component? One trick we can use is called cropped grid components.
The short version is that a cropped grid component is just a component that holds more than one of the same component and then we just only make it big enough to show the number we need—cropping out the the rest.
Yes, it feels like a hack, but it’s an officially sanctioned thing. I don’t make the rules around here.
We’re going to set up a frame to serve as out checklist component. And then fill it up with more stuff—in this case, the Checklist Item component that we made in previous section—than we need.
- Create an empty frame.
- Drag in one Checklist Item component.
- Duplicate it multiple times.
- Set the constraints to have it move along the top and then the center of the parent.