Scale image on vstack9/19/2023 ![]() ![]() 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. You only need to add the image to the asset library of your Xcode project and then pass the image name to the Image() view.Lazar Nikolov: Throughout this course, we'll be building this user interface. To display an image in SwiftUI, you can use the Image view. But the image is a good example of how not to do it. Typically you would use something much smaller than that. In my example, I use a large image from Unsplash (Photo by Jametlene Reskp on Unsplash) with a resolution of 5472x3648 pixels. Then the image is used for all scale factors. A shortcut is to set the image scale to single. If you drag an image into assets, the image will only be used for the 1x scale. Images have 3 different scales for different device screens.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |