To recap, we can use the container component to keep our content contained and centered. These are some of the layout components that are built in Chakra UI, but they're enough to achieve our design. Then we can see the flex component here, which wraps around the two of our sections. Let's try to do inspect element and see what we have. Also the first section is here, but the background is the same. We can see that the second section is here. The gray.50 is a design token from Chakra UI. In this case, we'll add a light gray background and we can do that by bg = gray.50. It's going to be pretty much the same as the first section, so we can copy paste this code. While we're here, let's also add the second section. Also the height to full, the padding to 10, which will be for the pixels, the spacing to 10, and we we'll set the alignItems to flex start. We're going to set the width or just W to full, which is 100 percent. Let's add the VStack in the import statement and add it to the flex component. It's very similar to the flex component, but it also has support of spacing that we can control. As the name suggests, the VStack component is a vertical stack that stacks its children vertically. To achieve this, we will use the VStack component from Chakra UI. We can see that the elements in the first section are stacked on top of each other. You can convert spacing values to pixels by multiplying them by four and vice versa, pixels to spacing values by dividing them by four. This way, we'll set the top and bottom padding to 20, which converts to 80 pixels. Py stands for padding y, or padding on the y-axis. We're going to set the height or just H to 100vh, which is viewport height and set the vertical padding to 20. Reformat the code just a little bit and add the flex component inside of the container. Before adding the sections, we'll add the flex component. That's why in this case, it's better to grab those two sections with a flex component, but we'll cover the responsive functionality in one of the following lessons. If we think about the responsive design, it will make more sense for these two sections to be aligned vertically on smaller screens and horizontally, just like they are now, on bigger screens. Next, we should add the two sections into the container component. That's about it for the container component for now. Instead of doing maxWidth, we can do maxW, and then just P, in this case. The style props also have shorthand names. Since the container component is empty right now, we can't see its effect until we add more elements to it. The container component by default has a padding of 16 pixels, and we don't want that in our case. In order to set the size to 1,280 pixels of the container component, we can do maxWidth = container.xl. We can see that there's a container section and there's an XL value of 1,280. Enter the default theme section and scroll down to the sizes section. Let's see what design token we need to use. In our case, we need to set the width of the container to 1,280 pixels. These style props are well documented and can be checked out on the Chakra UI website. Under the hood, these style props are compiled to CSS properties. We can use style props to access those design tokens that are part of Chakra UI. Chakra UI has its own implemented design system and every design system has designed tokens, which are colors, spacing units, fonts, sizes, etc. Before we do that, I'll briefly explain Chakra UI's design system. The container component by itself has some default parameters, but we would like to overwrite them. We're going to import the container component from Chakra UI/react and add it into our index page. Let's switch to the index.tsx file and add an import statement at the top. Let's add the container component in our index.tsx file. In Chakra UI, we can use the container component to achieve the same. They represent two columns with 640 pixels each, totaling at 1,280 pixels. These are the margins that keep our content contained and centered. First, we'll focus on these two red lines. Just by looking at it, we can immediately see that we have two types of fonts, a few inputs, a checkbox, a button, an image, etc. Lazar Nikolov: Throughout this course, we'll be building this user interface.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |