Luckily TailwindCSS provides a wonderful utility class called. That’s a very “web browser” type feel not a “native app” type feel. ![]() While you do want to show user interaction on a button, you don’t want to outline it. Starting to get there! There are few other utility classes TailwindCSS provides that really help to make developing a mobile app a breeze. The result of this change looks like this: This way it will apply to the entire mobile application: I did this in the same layout as I added the safe- classes. Now we aren’t just focusing on iOS, but this looks wonderful with Android as well.ĭoing this with TailwindCSS is a breeze! We just need to add the utility mx-4 to the container. This is the default if you would do AutoLayout when building an iOS app. My go to margin for each side of the app is 16px. However, the text does run all the way to the left and right on portrait mode. Either way works great, and as long as you have the helpful utility classes at your disposal, it should be pretty quick to resolve! There’s a few ways to solve this, like adding a header, or doing a view height that overflows when scrolled. Looks a lot better now! On scroll, the text DOES go behind the notch. Now when we build our app, the notch has been accounted for on both orientations: In the wrapper apply the following classes: Right now, we just have a layouts/default.vue file, so let’s open that. The best way to do this with NuxtJS is through the layouts which pages inherit from. To apply these classes, we want to account for the entire layout of the app and for every orientation. We now have the safe-top, safe-left, safe-right, and safe-bottom utility classes at our disposal! Let’s apply them and check out the result. So what this does is gives us a few utility classes we can apply to our layout that account for the notch. PaddingBottom: 'env(safe-area-inset-bottom)' PaddingBottom: 'constant(safe-area-inset-bottom)', PaddingRight: 'constant(safe-area-inset-right)', PaddingLeft: 'constant(safe-area-inset-left)', PaddingTop: 'constant(safe-area-inset-top)', In the array, add the following plugin to add a few utility classes that account for the notch: plugins: [ Now, find the plugins array near the bottom of the file. First, on top of your file add the following so we can create plugins: const plugin = require('tailwindcss/plugin') To solve this in our app, let’s make a simple TailwindCSS plugin. They get set when the user rotates the phone and the amount of “safe-area” gets defined. These variables will account for screen rotation as well since the notch could be on the right or left side of the screen. Or in our case, make a simple tailwind plugin that allows you to easily apply both! If you are supporting iOS 11.0 – 11.2 then use constant(), after 11.2 use env(). The two ways to apply these variables are through the constant() and env() helper methods. After conversion, include them in our project and voila, the UX starts to come to life! As Dragon mentioned, there are two ways to apply these CSS variables and four different variables. With some of the tips that Dragan Eror presented in his post, we can convert this to some useful TailwindCSS utility classes. Luckily, you can do this through CSS through pre-defined variables present on iOS. ![]() You have to account for the padding on the top so your images or logo doesn’t bridge into the Notch area. This is obviously a much more dramatic example with the text, but you can see the UX is not good. We cleared out the existing NuxtJS default page and added some Lorem Ipsum content so you can see what we are talking about. So what’s the notch? It’s the top of the screen on your new iPhone where Face ID authenticates. Like in the next section when we deal with the notch. Setting these defaults right off the bat will save a ton of problems in the future. In this array, update the object with the name viewport to be: , ![]() In this file, you will see a head object with a meta array. The first step we need to do is open up the file. This will disable the resizing by the user, set some default scales, widths and heights, and generally make your styles more friendly to work with mobile. To make working with mobile easy, we need to set some viewport meta data. Let’s go through a few of these tricks! Set the Proper Viewport These tricks help make your app feel more “app-like” and provide that UX that someone using a native phone app would be used to. While your layout is entirely up to you and TailwindCSS makes this a breeze, there are a few tricks. You will be using the same process as you would for web, except focusing on the responsive aspect of your application. Once you have your NuxtJS application packaged up with CapacitorJS, using TailwindCSS to style your application is really straight-forward. Build better software and get user feedback directly in GitHub, GitLab, and more.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |