Node-RED系列(二六):使用dashboard节点开发常见的表格搜索布局

192 篇文章 132 订阅
本文介绍了如何使用Node-RED的dashboard组件创建一个具备表格展示和搜索功能的页面。通过理解dashboard的tab、group和页面元素概念,实现了一个包含用户信息的表格,并添加了关键词搜索功能。当用户输入关键词时,会自动搜索匹配的用户名。
摘要由CSDN通过智能技术生成

背景

在node-red中,要做一个美观的面板,很多人都会选择使用node-red-dashboard这个库,该库在github上的star也很高,支持的特性也很多,比如中间件,多页面,栅栏式的排版布局。今天的这篇文章我就带大家使用dashboar的做一些常见的布局。

布局介绍

在使用dashboard做页面时必须要了解其中的几个概念,
其一就是dashboard的tab,所有的页面元素都要有一个tab来装载,它是一个基本的容器,一个页面可以有多个tab,用户可以自由切换。

一个页面同一时间只能显示一个tab。
dashboard tab 的配置页面
在这里插入图片描述

在tab下,又存在多个group,每个group相当于一个div,每个div可以设置宽度,
width的每一格默认代表 48px, 间隔为6px
在这里插入图片描述
在gro

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拿我格子衫来

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值