-Vant app-9(Tabs)

The body of the

As shown in the figure above, the Tabs TAB, usually located at the top of the page, is a very common structure in wechat applets to separate data sets that are related in content but belong to different categories. In this installment, we look at the use of tabs in Vant syndrome

The introduction of

First we introduce the Tab Tab in the.json file of the corresponding page

"usingComponents": {
  "van-tab": "@vant/weapp/tab/index"."van-tabs": "@vant/weapp/tabs/index" 
}
Copy the code

Then enter the sample from the document in the.wxml file

<van-tabs
  active="{{ active }}"
  border="{{ true }}"
>
  <van-tab title="TAB 1">The content of 1</van-tab>
  <van-tab title="Label 2">Content of the 2</van-tab>
  <van-tab title="Label 3">The content of 3</van-tab>
</van-tabs>
Copy the code

Results the following

The elastictabs 栏

• iphone 6

  

• iphone x

  

As you can see above, the first problem we have is that the tabs bar is fixed at 44 px. This is not an elastic layout, but there is no interface in the Tab documentation to set the tabs bar height…

Remove style isolation methods

As we discussed in the previous article, we first consider using external style classes when we want to style a component but the component does not directly open the associated interface. Unfortunately, the following tabs TAB source code shows that the view tag, which controls the height of the tabs bar directly through the height property, does not open an external style class

<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
Copy the code

At this point, following the conclusion of the previous article, we should start thinking about breaking style isolation

We found the corresponding class in the developer tools

And modify it in the.wxss file

.van-tabs--line .van-tabs__wrap {
  height: 200px ! important;
}
Copy the code

However, the modified effect is shown in the figure below

As you can see, the tabs TAB simply expands the outer box, and the internal tabs are still 44 px…

We can only further search for classes corresponding to control height on this basis, as shown in the figure below

As you can see, this class uses the line-height attribute to control the height of each TAB inside the Tabs column

Further changes are made in the.wxss file

.van-tabs--line .van-tabs__wrap {
  height: 200px ! important;
}

.van-tab {
  line-height: 200px ! important;
}
Copy the code

After modification, the following figure shows the effect

As you can see, the tabs column height has been set successfully

useCSSVariable method

However, the need to modify two CSS style classes just to set the height of a tabs column seems a bit verbose. After some digging, I found an approach based on using CSS variables

I have to correct a mistake I made in the last article: using CSS variables as a tool for theme customization feels overdone for a single component

This is actually my conclusion from just looking at the introduction to using CSS variables…

After reading the documentation on using CSS variables, I think the solution to component styling problems can be divided as follows:

In the case of the tabs column height customization problem, CSS variables are the best solution

Var (–tabs-line-height,44px); var(–tabs-line-height,44px); var(–tabs-line-height,44px); CSS variables can be used to solve the problem of high customization

1. As with external style classes, you can customize style classes, except that the content is set to CSS variables

   .tab-height {
     --tabs-line-height: 250px;
   }
   Copy the code

2. Bind this class directly to the component you want to customize

   <van-tabs
     class="tab-height"
     active="{{ active }}"
     border="{{ true }}"
   >
     <van-tab title="TAB 1">The content of 1</van-tab>
     <van-tab title="Label 2">Content of the 2</van-tab>
     <van-tab title="Label 3">The content of 3</van-tab>
   </van-tabs>
   Copy the code

As shown below, this achieves the same effect as using unstyle isolation

trailer

Specific component usage practices

In this installment, we started learning about using CSS variables by looking at customizing the tabs column height, and in the next installment, we’ll continue learning about the use of specific components 🙂