专栏首页WebJ2EEReact:Table 那些事(3-1)—— 基础表格、边框控制

React:Table 那些事(3-1)—— 基础表格、边框控制

《React:Table 那些事》系列文章,会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某个具体功能展开分析:

  • 要实现什么功能?
  • 接口如何定义?
  • 功能如何实现(HTML结构、CSS效果)?
  • 有什么常见问题?如何解决?
  • 性能调优?注意事项?

这个即将诞生的 React Table 组件,就命名为 webj2ee-table

这一篇文章由两部分构成:

1. 构建 webj2ee-table 的基础接口

2. 增加边框控制功能(border=true)

现在主流 UI 框架中的 Table 组件

一般都是这样的

即在默认情况下

表格不显示列边框线

一般需要通过类似 border=true 的声明

控制边框显隐

webj2ee-table

也将采用默认不显示列边框的设计方式

下面具体看看设计过程

1. 基础表格 - 接口设计

首先构建 webj2ee-table 组件的

基础接口

2. 基础表格 - 应用示例

给出具体实现前

先看看基础接口怎么用

3. 基础表格 - 代码实现

用最直观、直接的方式

实现基础接口

暂时不考虑组件拆分、性能调优等问题

下面扩充边框控制功能

4. 边框控制 - 接口设计

5. 边框控制 - 应用示例

6. 边框控制 - 代码实现

边框控制的关键在于 CSS 部分

合理安排边框

避免多条边框叠加在一起


总结一波,截止到现在

webj2ee-table 已实现的接口为

参考:

less 技术手册; ant-design 源码; element-ui 源码; iView 源码; rsuite 源码;

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React:Table 那些事(2)—— 解读 W3C 规范

    —— https://www.w3.org/TR/CSS22/sample.html

    WEBJ2EE
  • JS:Web Storage API(localStorage、sessionStorage)

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。Web Storage 包含如下两种机制...

    WEBJ2EE
  • 【CSS】:颜色、背景

    CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。一种颜色可以用以下任意的方式来描述:

    WEBJ2EE
  • Future的使用

    在开发多线程时,我们有时会需要返回子线程的处理结果,但不幸的是Runable接口是void类型没有返回值的。有人可能会想到用实例变量的方法实现此需求。实例变量的...

    吉林乌拉
  • 收藏| 最全 SLAM 开源数据集汇总

    对于许多无人驾驶或者 SLAM 初学者来说,搞一个真车或者选择一款良好的设备来进行算法测试通常是个很头大的问题,且还需要解决很多诸如传感器之间标定不好,多传感器...

    小白学视觉
  • 这些神经网络调参细节,你都了解了吗

    今天在写本科毕业论文的时候又回顾了一下神经网络调参的一些细节问题,特来总结下。主要从weight_decay,clip_norm,lr_decay说起。

    zenRRan
  • 百度数据可视化实验室正式成立,发布深度学习可视化平台 Visual DL

    AI 科技评论消息,1 月 16 日,百度 ECharts 团队发布旗下知名开源产品 ECharts 的最新 4.0 版本,并宣布品牌升级为「百度数据可视化实验...

    AI科技评论
  • 去他的互联网创业风口

    315晚会后,电子烟行业一地鸡毛,前一天这个行业还是风口,启信宝数据显示,从15年一直到18年,电子烟行业新增企业数量每年都有一千多家,2019年仅仅过去了三个...

    罗超频道
  • docker内部容器自动重启配置。

    1.创建容器时没有添加参数 --restart=always ,导致的后果是:当 Docker 重启时,容器未能自动启动。

    @凌晨
  • 深度丨吴恩达团队最新论文:用CNN算法识别肺炎影像,准确率超过人类医生

    大数据文摘

扫码关注云+社区

领取腾讯云代金券