Introduction to JavaScript framework (xmlplus) components (5) Tabbar

xmlplus is a JavaScriptframework used for rapid development of front-end and back-end projects. This article mainly introduces the tab of the xmlplus component design series, which has certain reference value. Interested friends can refer to

This chapter will design a tab component, which is handheld It is often used on equipment. The following is a schematic diagram:

Tab composition

Before the specific implementation, Imagining how the target component is used will be of great help to the design. By inspection, the tab component can be divided into a container part and a child part, as shown in the following XML structure.

<Tabbar id="tabbar">
  <TabItem id="home" label="首页"/>
  <TabItem id="setting" label="设置"/>
  <TabItem id="logs" label="日志"/>
  <TabItem id="about" label="关于"/>
</Tabbar>

Now we switch our attention to the sub-item part of the tab component and see how the sub-item part is decomposed. From the diagram, you can see that the child section can be broken down into a child container and a child section that contains an icon and a text.

<a id="tabitem">
  <Icon id="icon"/>
  <span id="label">首页</span>
</a>

So, now our goal is very clear, mainly designing three components: the icon component Icon, the sub-item TabItem of the tab component, and the container Tabbar of the tab component.

Structural diagram

Because this component is relatively simple, the three sub-components can be placed at the same level. But please note that we also have four icon components and can create a child to hold them. Our component structure diagram is given below:

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

##Icon implementation

Let’s start with the simplest and look at the four icon components. The icon component is mainly implemented by encapsulating SVG text. Since the icon text is long, only a section of each icon text is intercepted 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>`
}

Please note that these icons are located under the virtual directory /icon, that is, you have to import it as follows:

xmlplus("ui", function (xp, $_, t) {
  $_().imports({Tabbar: {... }, TabItem: {...}});

  $_("icon").imports({--这里包含了四个图标组件--});
});

Let’s implement the icon component Icon. The icon component here is the same as the one above. Differently, it will instantiate different icons according to the input icon type. This design can reuse part of the same code and 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 item of this component creates an icon component based on the input icon type and replaces the existing span element object . Note that you need to re-add the style after replacement.

Implementation of sub-items

According to the principle from the inside to the outside, next implement the sub-item TabItem of the tab component. For this component, you need to do a different-name

attribute mapping in the component's mapping item, and map the id attribute value to the icon attribute of the internal icon component.

TabItem: {
  css: "这里是样式项部分，为便于组件整体展示，略去...",
  map: {"attrs": { icon: "id->icon" } },
  xml: `<a id="tabitem">
       <Icon id="icon"/>
       <span id="label">首页</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 unselected states when switching options. For use by tab containers.

Implementation of tab

Finally, let’s look at the implementation of the tab component Tabbar. This component listens to the

event when the user touches the tab. It mainly does two things in the listener: one is to maintain the switching of the tab state; the other is to dispatch a tab switching event. State change event.

Tabbar: {
  css: "这里是样式项部分，为便于组件整体展示，略去...",
  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();
  }
}

At this point, a tab component is completed. Let’s take a look at a specific application:

xmlplus("example", function (xp, $_, t) {
  $_().imports({
  Index: {
    xml: `<Footer id=&#39;footer&#39;/>`,
    fun: function (sys, items, opts) {
      this.on("switch", (e, target) => console.log(target));
    }
  },
  Footer: {
    xml: `<Tabbar id="footer">
         <TabItem id="home" label="首页"/>
         <TabItem id="setting" label="设置"/>
         <TabItem id="logs" label="日志"/>
         <TabItem id="about" label="关于"/>
       </Tabbar>`
  }
  });
});

In the component Index, you can listen to the switching event from the tab to do Corresponding operations. For example, use the

View stack component we will introduce later to perform switching operations between pages.

This series of articles is based on the xmlplus framework. If you don’t know much about xmlplus, you can visit www.xmlplus.cn. Detailed getting started documentation is available here.

【Related recommendations】

1.

Free js online video tutorial

2.

JavaScript Chinese Reference Manual

3.

php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Introduction to JavaScript framework (xmlplus) components (5) Tabbar. For more information, please follow other related articles on the PHP Chinese website!