文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Ant Design 4.0 正式版来了！

设计规范升级 我们将基础圆角由 4px 调整为 2px。中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。...你可以在页面中点击切换主题功能查看暗色主题效果： 64.gif 无边框组件 在业务中，我们发现有些场景会存在轻量级的选择组件。...因而我们提供了一种新的无边框样式，让开发者可以更简单的嵌入这些组件而不用额外覆盖样式。 ? 兼容性调整 Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。...同时，我们提供了新的 summary API 用于实现总结行的效果： ? 对于 sorter 提供了多列排序的功能： ?...提供了 body API 用于自定义表格内容实现，你可以由此实现诸如虚拟滚动的效果。

3.7K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React：Table 那些事（2）—— 解读 W3C 规范

    注：这里面 col、colgroup 可能比较生僻，但用处很大 再看一个应用示例 图：antd 的 Table 组件 UI ? 图：antd 的 Table 组件 HTML 结构 ?...Table 的固定布局算法 {table-layout: fixed} 特点： 与自动布局算法相比，布局速度更快（浏览器接收到第一行后就可以显示表格）。...水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。...table 不可以设置 padding 内边距； row、row-group、col、col-group 元素可以正常应用边框； 单元格边框之间不会有任何间隔（相邻边框会合并：“最有意思”的边框会胜出）...； 边框一旦合并，单元格之间的边框会在单元格间的假想表格线上居中。

    3.1K30

    Ant Design 按钮和图标的使用

    Ant Design 的样式 import "antd/dist/antd.css"; 接下来我们需要引入我们想用到的按钮组件（这是一种解构的写法） import { Button } from "antd...3.按钮 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。...白色背景，文字黑色，鼠标悬停变边框和文字变为蓝色。 primary ：蓝色背景，文字白色。 dashed ：与default不同的是 边框为虚线 text：文本黑色，没有背景。...danger：在其他样式框架中（如elementUI）中都是作为type的一种类型，只是颜色变成了红色。但是在Ant Design中被作为一种属性。...danger> Text Link 3.2 shape 默认是矩形 circle是圆形 round圆角矩形

    3.4K30

    CSS——属性列表

    取值为 collapse 时隐藏表格的一行或一列。2z-indexz-index该属性指定元素及其子元素的z-order。当元素之间重叠时，z-order可决定元素显示的顺序。...3border-radiusborder-radius 该属性用作规定边框圆角。一个半径确定一个圆形；当使用两个半径时确定一个椭圆，该椭圆同边框的交集形成圆角效果。...若同时在元素上设置了border-radius，阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。...1 表格 元素描述版本border-collapseborder-collapse 属性规定表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。...2empty-cellsempty-cells 属性规定是否显示表格中的空单元格（仅用于“分离边框”模式）。2table-layouttable-layout 属性为表规定表格布局算法。

    3.6K10

    HTML5+CSS3

    font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距...设置盒子左边边框的三个属性 如：border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线 border-right 设置盒子右边边框的三个属性 如：border-right...none border-radius 设置盒子的圆角 如：border-radius:10px 设置盒子的四个角为10px半径的圆角 box-shadow 设置盒子的阴影，如：box-shadow...设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸 border-collapse 设置表格边框是否合并...，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格。

    2.4K21

    全栈之前端 | 10.CSS3基础知识之表单表格学习

    border-radius 属性 - 设置外边框圆角 border-collapse 属性 - 设置表格的边框是独立或合并 border-width 属性 - 设置表格的边框宽度 border-spacing...属性 - 设置表格分隔边框的距离 visibility 属性 - 设置表格或其他元素是否可见或不可见 table-layout 属性 - 设置表格的单元格、行和列宽带的算法 caption-side...border-radius 属性 - 设置外边框圆角 描述: 此 border-radius 属性允许你设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆，此（椭）圆与边框的交集形成圆角效果...table-layout 属性 - 设置表格的单元格、行和列宽带的算法 描述: 此属性定义了用于布局表格的单元格、行和列的算法，简单的说使用 table-layout: fixed 创建更可控的表布局，...> 执行结果: border-collapse 属性 - 设置表格的边框是独立或合并 描述: 此属性在表格样式设计中非常实用，其用来决定表格的边框是分开的还是合并的。

    1.3K10

    从头学前端-CSS基础03

    1.盒子模型盒子模型组成：> 盒子模型组成的主要有 边框border，外边距margin ，内边距padding，内容content；- 边框border:> border可以设置元素的边距，边距有三部分...，宽度，验收，颜色> border: border-width || border-style || border-color> 边框四个边可以分开来写，如border-top:> border-collapse...:collapse可以合并表格的相邻边框> 边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；- 内边距> padding用于设置内边距，即盒子边框和内容的距离.默认是...，此时考虑清除内外边距； * { margin:0 padding:0 } > 行内元素尽量只设置左右边距，考虑兼容性问题； CSS3盒子属性圆角边框:> 用于设置元素的外边框圆角> border-radius...- 如果多个盒子都添加了浮动，那么所有浮动的盒子将会在一行内显示，并且顶端对齐；- 浮动的元素是互相紧贴到一起，如果父级元素的宽度装不下元素，浮动元素会另起一行靠左排列 浮动元素会具有行内块元素的特点-

    1K20

    时间选择器组件之关于table走过的弯路

    于是我们通过每个子单元格均分的特性，设置总的行宽和行高来控制单元格自身的大小和之间的距离，从而达到实现整体表格布局的效果。...于是，我们还要利用scss的语法特性为样式设置生效条件来区分两种不同的显示策略。 [rwy5ub7f0s.png] border-radius问题 设计稿要求，每一行的选择框的起始和末尾需要有圆角。...这样一个常见的需求，table果然没让我失望，对tr标签设置无效。原因是因为在border-collapse设置为separate下，对于所有table标签设置圆角都无法生效。...第一种就是对tr的子td， first-child/last-child设置圆角。讲到这里就不得不提table的一个属性:border-collapse。这个属性用来决定表格的边框是分开的还是合并的。...separate表示每个单元格拥有独立的边框，inherit表示相邻的单元格共用同一条边框。 当在separate模式下，我们还可以通过设置border-spacing设置边框的宽度。

    1.6K41

    前端展示中实现批量标签动态生成

    www.grapecity.com.cn/solutions/wyn/industry 1.创建RDL报表，绑定数据集 2.设计单个标签的样式以及字段绑定 单个标签设计有多种方式，可以用文本框和条形码组件拼接： 也可以采用表格组件标题行嵌套文本框和数据字段...； 选择表格组件，删除汇总行和明细行 然后表格标题嵌入条形码，以及绑定数据字段 预览可以看到目前设计的单个标签样式 如果单个标签外层还想添加圆角边框，或者其它的样式，可以在外层嵌套容器 选择容器...，然后设计圆角，以及边框粗细，颜色等等； 接下来把上面设计的单个表格整个嵌套到这个容器内部 到此单个标签设计全部完成 3.根据数据循环生成多个标签 要实现根据数据行数循环生成多个标签，就需要利用列表组件...； 比如我的标签宽度9厘米，我希望一行显示3个标签，那我就需要纸张的宽度至少是  9*3+左右页边距=29cm 然后设置纸张高度为：标签高度+上下页边距=7cm； 然后设置报表进行分栏，分成3栏...，这样一行就可以显示3个标签 注意：在设计的时候有一些尺寸高度，宽度微调，这块尽量使用属性设置的宽度高度调整固定值，不要手动拖动大小； 到这里我们就完整实现了前端报表中完整调整标签内容格式，并设置正确的打印格式顺序

    1.6K20

    HTML5 与CSS3 相关笔记

    18.表格基本结构：单元格、行、列 (1),,, (2)HTML5中已废除table的border属性，用css控制边框宽度。...42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角 (语法)border-radius:length{1~4个数字}; (1)用border-radius制作特殊图形 圆形：...加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。...（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。） 3、：表格的一行，所以有几对tr 表格就有几行。...4、：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。 5、：表格的一个单元格，一行中包含几对这行中就有几个单元格。 6、表格中列的个数，取决于一行中数据单元格的个数。

    7.3K30

    「趣学前端」优雅又精致，来看看别人家的表格样式是怎样实现

    百变表格 以下表格的样式，参考了antd的Table组件、掘金文章主题等。 类型 效果展示 实现方案 错落有致的边框表格 前面的篇章里讲过border属性可以为元素添加边框。...每个元素的边框包括四个边，如果相邻元素的四个边都设置，边框会变粗，所以单元格需要为相对的边设置单侧边框才有图中的效果。...我为单元格都设置右侧和下侧的边框，所以表格最外层只需要设置左侧边框即可，border-left: 2px solid #916dd5。 表头固定的表格 表头固定，即不随表格内容的滑动一起滑动。...表头设置黏性定位，即position: sticky。就可以实现固定的效果。 带省略的表格 当表格文字过多时，为了优雅的展示表格，一般会设置文字超出一定的长度展示省略号。...scope 属性标识某个单元是否是列、行、列组或行组的表头。 没错，想实现分组的表格，需要欢乐组合套餐。 活动规则单元格上设置rowspan 属性值为2，它可以跨越2行。

    2.4K20

    年度实用技巧 | 容器上的折角边框是图形吗？

    右下角的折角，使用border-bottom设置下边框，使用border-right设置有边线，变呈现出一个向左上开口的折角。知识点讲解今日主要讲讲如何为设置边框样式。...边框类型边框的样式支持很多种类，可以是实线也可以是虚线，可以只设置局部边框，可以为边框添加圆角样式。...折角边框单侧边框虚线边框圆角内凹边框别具一格的按钮实现方案类型实现方案折角边框容器上两个相对的角上，分别添加一个矩形，只设置相邻的两条边就会形成折角的效果，比如左上角的折角，使用border-top设置上边框...圆角内凹边框边框的颜色可以设置成透明，所以两侧的圆角内凹是通过将圆形图案的相邻边框设置为透明实现的效果，比如左侧的圆形图案，设置border-left-color的值为transparent和border-bottom-color...别具一格的按钮通过设置border的不同类型值为按钮添加边框样式；通过设置border-radius属性四个角的值，展示不同的边框圆角样式。

    59510

    iOS编程101：如何创建圆形头像和圆角图片

    在内置的应用中可以看到圆形图标或圆形图像，如联系人和电话应用。这篇短文中，我们将探讨CALayer类，以及如何运用它来创建圆形图像或圆角图像。 您可能并没有听说过CALayer类。...所以上面的第一行是设置layer对象（CALayer类的一个实例）的圆角半径。将方形图像变成圆形图像，半径应设置为UIImageView宽度的一半。例如，如果方形图像的宽度是100像素。...只需两行代码，图像从方形变为圆形。无需Photoshop。 添加边框 接下来，我们给头像添加边框使它更漂亮点。同样，也只需要两行。...= [UIColor whiteColor].CGColor; 我们只是设置了边框的宽度和边框颜色。...再次编译并运行应用程序，您现在应该看到一个拥有白色边框的头像。 创建圆角图片 你可以使用同样的方法来创建圆角图像。关键是要改变圆角半径，并将其设置为其他值。

    2.8K20

    【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

    border-style border-color 之前的边框需要写 3 行代码 , 设置 3 个属性 , /* 边框宽度 4px */ border-width: 4px;.../* 边框样式-点线 */ border-style: dotted; /* 边框颜色 */ border-color: red; 边框设置综合写法 , 只需要写一行代码 ,...上的 边框 可以单独指定样式 , 如 : 上边框指定 4 像素 的 红色 实线 , 下边框 指定 2 像素 的 灰色 虚线 ; 3、盒子边框单独指定语法 边框单独指定 语法 : 上边框 : 上边框样式...圆角边框 在 CSS3 中 , 新加入了 圆角边框 样式 , 设置 border-radius: length; 属性 , 即可设置 盒子模型 的 圆角边框 ; border-radius 属性值取值...: 像素数值 : 设置一个 像素值 , 如 : 50px ; 百分比数值 : 设置一个 百分比数值 , 如 : 50% ; 在网页设计中 , 大量用到了圆角边框 , 如 : 购物车上的数字 : 购物车上的浮动数字

    1.2K10

    BootStrap基础知识

    使用行来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间的间隙。...带边框表格 table-hover 鼠标悬停状态表格 table-dark 黑色背景表格 颜色类 类名 作用 table-primary 蓝色: 指定这是一个重要的操作 table-success...table-dark 可以是表格行的背景 其他类 类名 作用 thead-inverse 给表头添加黑色背景 thead-default 给表头添加灰色背景 table-sm 通过减少内边距来设置较小的表格...白色边框 rounded 添加圆角边框(需配合以上border使用，下同。)...椭圆形边框 rounded-0 去除圆角 float-right 设置元素右浮动 float-left 设置元素左浮动 clearfix 用于清除浮动 mx-auto 设置居中对齐 my-auto 上下

    3.2K10

    CSS 盒子模型（一）

    边框宽度(粗细) 单位 px border-style 边框的样式 solid border-color 边框颜色 普通颜色 表格的细线边框（border-collapse） 为什么要单独说这个呢...可以看到，这是一个二行二列的表格，我们设置了他的边框是 1px 的红色实线。没有发现这样的表格很丑吗? 因为他的边框让人感到杂乱无章 ，因为每个td都有 4 个边。...border-collapse： 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。...padding 属性用于设置内边距，即边框与内容之间的距离。...但是转换为块级和行内 块元素就可以了 圆角边框(border-radius) border-radius 属性用于设置元素的外边框圆角 语法： border-radius:length; 参数值可以为数值或百分比的形式

    43510

    HTML-CSS基础学习

    table 表格属性： border:表格边框长度，为空为没有边框 td,th属性： colspan：横跨水平单元格数量 rowspan：纵跨垂直单元格数量 表格标签： table 表格...，适用于块元素， 内联元素使用时，需要设置元素的height或width或设置position属性为absolute或设置display属性为block ::first-line 设置元素内的第一行字符的样式...下边框宽度 border-left-width 左边框宽度 border-width 复合属性 参数（all；上下左右；上下、左右；上、左右、下） 圆角边框 border-top-left-radius...边框左上角圆角半径 border-top-right-radius 边框右上角圆角半径 border-bottom-right-radius 边框右下角圆角半径 border-bottom-left-radius...边框左下角圆角半径 border-radius 复合属性 参数（all；上下左右；上下、左右；上、左右、下） 边框阴影 box-shadow: h-shadow v-shadow blur spread

    6.5K30

    前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）

    实现功能： 简单表格导出 为表格添加样式（更改背景色、更换字体、字号、颜色） 设置行高、列宽 解析 ant-design 的 Table 直接导出excel，根据 antd 页面中设置的列宽动态计算 excel...先看效果，我们用 AntD 的 Table 写个简单的表格页面，并设置不同的列宽： 点击导出 excel，然后打开得到以下结果： 可以看到，导出的 excel 列宽比例跟在线的表格是一致的。...后续对表格的所有操作，都是对 worksheet 的操作。 设置表格的默认行高。这步非必要，但是设置了更美观。否则会出现有内容的行跟没有内容的行行高不一致的情况。 设置列数据（表头）和每行的数据。...当然也可以对每个 cell 进行设置，效果是一样的。 设置边框也是同样的方法，这里不做介绍啦。...一块内容占用了多个单元格，要进行一行中多个列的列合并，如成绩和老师评语列。 行合并。表头其实是占了两行，除了成绩外，其他的列都应该把两行合并为一行。 行和列同时合并。

    13.8K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券