Xmlplus Component Design Series tab (Tabbar) (5), xmlplustabbar

Xmlplus Component Design Series tab (Tabbar) (5), xmlplustabbar

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

Tab Composition

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.

<Tabbar id = "tabbar"> <TabItem id = "home" label = "home"/> <TabItem id = "setting" label = "set"/> <TabItem id = "home ""logs" label = "log"/> <TabItem id = "about" label = "about"/> </Tabbar>

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.

<A id = "tabitem"> <Icon id = "icon"/> <span id = "label"> homepage </span> </a>

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: `<svg width="48" height="48" viewBox="0 0 1024 1024">        <path d="M507.577907 23.272727C240.142852..."/>     </svg>`},Home: {  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">        <path d="M949.082218 519.343245 508.704442..."/>     </svg>`},Logs: {  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">        <path d="M576 125.344l32 0 0 64-32 0 0-64Z..."/>     </svg>`},Setting: {  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">        <path d="M512 336.664c-96.68 0-175.336 78...."/>     </svg>`}

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: `<span id="icon"/>`,  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: '<a id = "tabitem"> <Icon id = "icon"/> <span id = "label"> homepage </span> </a>', 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 the section... ", xml: '<nav id =" tabbar "/>', 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: '<Footer id = 'footer'/> ', fun: function (sys, items, opts) {this. on ("switch", (e, target) => console. log (target) ;}}, Footer: {xml: '<Tabbar id = "footer"> <TabItem id = "home" label = "home"/> <TabItem id = "setting" label = "set"/> <TabItem id = "logs" label = "log"/> <TabItem id = "about" label = "about"/> </Tabbar> '}});});

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.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.