Building responsive tabs – Web design tutorial


Tabs are a great way to add responsive, tabbed
content to your project. And we’re going to recreate this example in
three different parts: adding tabs, adding content, and styling tabs. Let’s add our Tabs. And we can find this in our Elements Panel
under Components. And when we drag Tabs into our project, they’ll
automatically fill up whatever container they’re in. In this case, we’ve dropped this element into
a container. And by default, we’re given three tabs. With any element in our Tabs Menu selected,
let’s go right on over to the Element Settings Panel, and switch between our active (or Current)
tabs. If we want to add a tab? Of course, we just add a tab. Or delete a tab. We can also rename these tabs in the Tab Settings
— and this is great for internal organization. But keep in mind if we want to change the
actual text that appears in the tabs menu, we’ll have to double click to type in our
own content. And we’ll do that right now in each of these
three tabs, so later on we can place the correct content in each tab pane. That’s adding tabs. Let’s look at content. And the structure of the Tabs element is fairly
straightforward. In the Navigator, we have the Tabs Menu (this
is where our tab links live) and the Tabs Content. This is where all the tab panes are — each
tab has its own pane. Let’s take a look at that. And we’ve pre-populated some content in a
series of symbols to save time during this demonstration, so we’re going to drag our
content from Symbols right into the first tab pane. And just like we can select each tab in our
Element Settings Panel, we have a similar control in the Navigator. Let’s select the second tab pane, of course
that switches over, and we can grab our next symbol and drag it right into the second tab
pane. And of course, we can select our third tab
pane, and grab our third block of content to drag into that one. When we go to preview, we see our content
load up perfectly as we switch between the tabs. That’s adding content. Finally, let’s style everything. And we’ll start by going over and selecting
the Tabs Menu from the Navigator, then heading to the Element Style Panel. From here, we’ll add some space underneath
our Tabs Menu to give us some breathing room between the links and the content. Which will look significantly better, as we
can see when we preview and switch between the different tabs. Back out of Preview, we’ll move forward and
style our actual tab links. And to do that, let’s select any of our tab
links, and we’ll go on over to create a class so we can use the same styles on all of them. Now since we created our class on the first
and current tab link, we’re also getting the indication that it’s the Current tab link,
which is indicated in green. Let’s select our second tab link and proceed
to add the same, brand-new class to that one, too. And then, finally, we’ll select our third
tab link, and of course, add the class one more time so we can make sure we’re styling
everything uniformly. Now we can start styling our class right here
while the third tab link is selected. We’ll go over and select a font color from
our Color Picker. In this case, let’s choose white. And we can also make other changes to typography
like font size, and let’s set our text to uppercase. We’ll take a look at the background color. And if we select our Color Picker from here,
we’ll be able to set our color to white, which makes things particularly low-contrast, and
we can drop our opacity to increase visibility. Once we’re done there, let’s select the active
(or current) tab so we can style the Current state. For this one, let’s change our background
color as well, this time to solid white with 100% opacity. And let’s change our font color so we can
actually read it. Which is always a nice feature when it comes
to design. Let’s click out and go right over to Preview
to see our hard work in action. As we click the different Tab Links, we can
see our content appear — with the styles we’ve applied to our Tab Link class. Let’s add styling on hover. We can select any tab link that isn’t Current
and head over to States to select our Hover state. And from here, we have the option to add or
modify styles on hover (like the background color). Let’s ramp up our opacity a bit. This time, let’s type the percentage right
into the Color Picker. When we click out and go to Preview, we can
see our hover state looks great. Now we can also control the transition between
different Tab Panes. With any of the tabs elements selected, you
can visit the Element Settings Panel to access various transition controls, like the fade
type (where we select the easing method). We can also control the duration for both
fading in (when we click a tab link) and fading out. And once we’re done there, let’s look at these
changes right over in Preview. Selecting between the tabs shows us that transition
— now with a longer duration. Finally, it’s worth noting that we can control
styles for different device widths. And you can see by default — on smaller
screen widths — that the content stacks vertically instead of crowding horizontally. So, we can add tabs right into our project. In each pane, we can add content. And we can style each and every aspect…of
the Tabs element.

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *