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
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>` }
xmlplus("ui", function (xp, $_, t) { $_().imports({Tabbar: {... }, TabItem: {...}}); $_("icon").imports({--这里包含了四个图标组件--}); });
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"); } }
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
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 }; } }
interface for switching between selected and unselected states when switching options. For use by tab containers.
Implementation of tab
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(); } }
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="首页"/> <TabItem id="setting" label="设置"/> <TabItem id="logs" label="日志"/> <TabItem id="about" label="关于"/> </Tabbar>` } }); });
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. 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!