Introduction to the JavaScript framework (xmlplus) component (5) tab (Tabbar)

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the tabs of the xmlplus Component Design Series and has some reference value. If you are interested, refer to xmlplus as a JavaScript framework for fast development of front-end and back-end projects. This article mainly introduces the tabs of the xmlplus component design series, which has some reference value. If you are interested, please refer to them.

In this chapter, a tab component is designed. The tab component is used on many handheld devices. Below is:

Before implementation, imagine how to use the target component, which will be of great help to the design. Through observation, Tab components can be divided into container components and sub-items, as shown in the XML structure below.

Now let's switch to the subitem section of the tab component to see how the subitem is broken down. You can find that the sub-item part can be divided into sub-item containers and sub-level parts that contain an icon and a text.

  
 Homepage

Therefore, our goal is very clear now. We mainly design three components: Icon of the Icon component, TabItem of the tab component, and container Tabbar of the tab component.

Structure chart

This component is relatively simple, so three seed components can be placed at the same level. Note that there are four icon components that can be used to create a sub-level to accommodate them. The component structure is shown below:

Tabbar/
── Tabbar
── TabItem
── Icon/
── About
── Home
── Logs
── Setting

Icon implementation

In the simplest way, let's first look at the four icon components. The icon components are mainly implemented by encapsulating SVG text. Because the icon text is long, only one section of each icon text is captured here.

About: {  xml: `
         
       
 `},Home: {  xml: `
         
       
 `},Logs: {  xml: `
         
       
 `},Setting: {  xml: `
         
       
 `}

Note that these icons are under the virtual directory/icon, that is, you need to import them as follows:

Xmlplus ("ui", function (xp, $ _, t) {$ _(). imports ({Tabbar :{...}, tabItem :{...}}); $ _ ("icon "). imports ({-- here contains four icon components --});});

The Icon component is different from the Icon component above. it instantiates different icons based on the input Icon type. This design can reuse some of the same code to avoid redundancy.

Icon: {  css: "#icon { width: 1.5em; height: 1.5em; display: inline-block; }",  opt: { icon: "about" },  xml: ``,  fun: function (sys, items, opts) {    sys.icon.replace("icon/" + opts.icon).addClass("#icon");  }}

The function of this component creates an icon component based on the input icon type and replaces the existing span Element Object. Note: After replacement, you must add a new style.

Subitem implementation

Based on the principle from inside to outside, the sub-item TabItem of the tab component is implemented. For this component, You need to map an attribute with a different name in the ing item of the component to map the id attribute value to the icon attribute of the internal icon component.

TabItem: {css: "This is the style item section. To facilitate the overall display of components, skip the section... ", map: {" attrs ": {icon:" id-> icon "}}, xml :'
 Homepage ', fun: function (sys, items, opts) {sys. label. text (opts. label); function select () {sys. tabitem. addClass ("# primary");} function unselect () {sys. tabitem. removeClass ("# primary");} return {select: select, unselect: unselect };}}

This component provides an interface for switching between selected and non-selected States during option switching. For use by tab containers.

Tab implementation

Finally, let's take a look at the implementation of the tab component Tabbar. This component listens on the events when a user clicks a tab. It mainly performs two tasks in the listener: one is to maintain the switch of the tab status; the other is the status change event when a tab switch is dispatched.

Tabbar: {css: "This is the style item section. To facilitate the overall display of components, Skip...", xml :'
 ', Fun: function (sys, items, opts) {var sel = this. first (); this. on ("touchend ",". /* [@ id] ", function (e) {sel. value (). unselect (); (sel = this ). value (). select (); this. trigger ("switch", this. toString () ;}); if (sel) sel. value (). select ();}}

Now, a tab component is complete. The following shows a specific application:

Xmlplus ("example", function (xp, $ _, t) {$ _ (). imports ({Index: {xml :'
 
  
', Fun: function (sys, items, opts) {this. on ("switch", (e, target) => console. log (target) ;}}, Footer: {xml :'
           
            
            
            
          
  '}});});
 

In the component Index, you can listen for switch events from tabs for corresponding operations. For example, switch between pages based on The View stack components we will introduce later.

This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.