U-way low-code technology column is a brand-new, technology-based column written by members of U-way technical committee. Based on U-way’s 7-year low-code technology research and development and operation and maintenance achievements, it mainly introduces the technical principles and architecture related to low-code Logic, the purpose is to provide a platform for technical exchange and learning for the majority of operation and maintenance personnel.
U-way low-code practice series No. 7
"Breadcrumb Configuration and Menu Configuration"
▽
1. Breadcrumb configuration
Our breadcrumbs are configured on the route, and the breadcrumbs can be inherited by sub-routes. For details, please refer to the "Breadcrumbs Configuration" chapter.
Let's simply make a breadcrumb configuration and open our routing parameter panel
菜单设置:
breadcrumb:
items:
- text: 任务列表After modification, the specific effect is as follows:
Of course, multiple breadcrumbs can also be configured, as shown in the figure below, which is a relatively simple configuration parameter:
2. Menu configuration
Locate the tpl-ui8-layout component on the component tree. This component is our UI8.0 layout component. Our menu and title configuration can be written on it. Here we learn a new syntax: APP .getMenu('xxx'), this expression is specially used to obtain menu data, it can obtain specific menu data according to the input parameter xxx, and pass it into the component as a menu input parameter, here has been configured by default Mock menu ID, we now want to add our own menu and add a sidebar for display, so how do we do it?
2.1 New main menu
Consistent with the interaction of the newly added component, move the mouse to the left MENUS panel, and the + icon will appear, click the icon, and the new menu form will appear on the right panel, as shown in the figure, add the main menu, and the parameters are as follows:
2.2 Add internal link menu items
Under the main menu we just added, click the + icon, and a form for adding menu subitems will appear. Fill in the form shown in the figure below. After clicking Save, click the Build & Push button on the upper right. After the push is successful, return to routing page
2.3 Add external link menu items
The above method belongs to the adjustment within the site, which belongs to the internal link adjustment. You can set the external link jump, the configuration is very simple, just check Use Href;
2.4 Page layout modification
Still locate the tpl-UI8-layout component, and modify its properties as follows:
属性面板-属性:
pageTitle: 任务列表
# 取消隐藏侧边栏
isHiddenSideBar: false
menu: <% APP.getMenu("helloworld-menu") %>
# 我们刚刚新增的主菜单id
sideBarMenu: <% APP.getMenu("task-main-menu") %>3. Conclusion
Through this lesson, we described the basic configuration of menus and breadcrumbs, which is relatively simple. The next section will introduce the use of expressions and functions, which will be relatively complicated. Please study carefully~