Scroll down to the SimpleGrid component and add our GridItem. We're going to import FormControl, but also FormLabel for the label and Input for the input. Chakra UI comes with a FormControl component that makes it easier for us to achieve the label and input layout. Let's also not forget to set the width of the grid to "full" so it takes up all of the available space. We will also set the columnGap to 3 and the rowGap to 6 because that's how we defined it into the UI design, so 24 pixels between the rows and 12 pixels between the columns. We'll set the columns property to 2, so that the Address input can span to two columns, and the rest of the inputs to just 1. Let's define the SimpleGrid component after the inner vertical stack. We're going to use the GridItem component as a wrapper around the form input so we can define how many columns each input is going to span to. We're going to import the SimpleGrid component and also the GridItem. The SimpleGrid component is the good old CSS grid that we know and love. To achieve this, we can use the simple Grid component that comes with chakra-ui. Before we start adding them, it's a good idea to set up their layout first. We can see that the names city and country inputs have just half of the width of the address input. Also set the align items to flex start, because they'll be centered by default. We'll set the spacing to 3, so it amounts to 12 pixels. Let's fix that by wrapping both the Heading and the Text component into their own V stack component. But if we check the design, we can see that the spacing between these elements is 12 pixels. That's because the parent V stack component defines the spacing as 40 pixels or just 10. One thing that we can see is that the spacing between the heading and the text is a bit bigger than the one in the design. We just need to write the text inside and that would be it. Let's import the Text component and place it after the Heading component. Since the size of the text in the figma design is set to two XL, we're going to set the size property to two XL. We'll import the Heading component from the chakra-ui/react package and place it in the VStack. During this lesson, we'll be working only in the details.tsx file. Then, I imported them into the index.tsx file. Here's the cart.tsx file and the details.tsx file. To make our code easier to read, I've moved the VStack components into the src/sections directory. In the previous lesson, we defined our sections in our index.tsx file. Before we begin, I'm going to briefly explain the changes I made. Those are the Heading component and Text component, respectfully. Chakra UI has separate components for titles and labels. We can immediately see that the first text is a title and the second text is a label. Lazar Nikolov: In this lesson, we're going to populate the first section of our UI design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |