首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TDesign 更新周报(2022年1月第1周)

@0.4.1 Dialog cancelBtn confrimBtn 支持所有 Button 属性 修复了 Tabs、Message、Dialog 等相关问题 详情见:https://github.com...规则 色彩系统增加语义化示意 重新梳理 Pages 框架,图标更改为独立内容 Text:修复二级文字加粗样式使用medium字重问题 Table: 修复表格项图标显示异常问题;修改用户反馈文案问题 Figma...for Mobile 发布 1.0.1 Badge:修复用户反馈信息极限情况下 Badge 非正圆以及信息不居中问题;优化了数字/文字型徽标的组件逻辑 Tabbar: 增加文本加图标标签栏及纯图标标签...:修复引用错误 file 问题 重新梳理 Pages 框架,图标更改为独立内容 Sketch for Web 发布 1.0.2 修改开关组件大小 调整抽屉组件按钮位置 Sketch for Mobile...将文本样式内嵌到组件库,可以快速调用 根据最新视觉样式调整了颜色、图标、布局、导航等模块 根据用户使用场景调整了组件库整体结构分组 解决版本兼容性问题 解决方案及周边 *** TDesign Starter

84540
您找到你想要的搜索结果了吗?
是的
没有找到

纯干货:手把手教你用Python做数据可视化(附代码)

▲图5 没有内部子图间隔数据可视化 你可能会注意到轴标签是存在重叠。matplotlib并不检查标签是否重叠,因此在类似情况下你需要通过显式指定刻度位置刻度标签方法来修复轴标签。...例如,要用绿色破折号绘制x对y线,你需要执行: ax.plot(x, y, 'g--') 这种在字符串中指定颜色线条样式方式是方便; 在实践,如果你以编程方式创建绘图,则可能不希望将字符串混合在一起以创建具有所需样式图表...结果图表参见图10: In [49]: ax.legend(loc='best') ? ▲图10 有三根折线图例简单图表 legend方法有多个其他位置参数loc。...04 注释与子图加工 除了标准绘图类型,你可能还会想在图表上绘制自己注释,而且注释可能会包含文本、箭头以及其他图形。你可以使用text、arrowannote方法来添加注释和文本。...▲图11 2008-2009金融危机重要日期 在图表中有一些重要点需要凸显:ax.annotate方法可以在指定xy坐标上绘制标签

4.4K21

React Native顶|底部导航使用小技巧

好在有人提供了更好导航组件,就是我们今天要讲react-navigation,并且ReactNative官方更推荐我们使用此组件。 本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳。  ...tabBarPosition- 标签位置可以是或'top''bottom' swipeEnabled - 是否允许在标签之间进行滑动 animationEnabled - 是否在更改标签时动画 lazy...showLabel - 是否显示标签标签,默认为true style - 标签样式对象 labelStyle - 标签标签样式对象 tabStyle - 标签样式对象 tabBarOptions...for (Android上默认标签栏)TabBarTop activeTintColor - 活动标签标签图标颜色 inactiveTintColor - 非活动标签标签图标颜色 showIcon...- 标签样式对象 indicatorStyle - 标签指示器样式对象(选项卡底部行) labelStyle - 标签标签样式对象 iconStyle - 标签图标的样式对象 style - 标签样式对象

7.7K60

VSCode 前端插件推荐

大家好,又见面了,是你们朋友全栈君。...插件名:Vue 3 Snippets 基本必备:很多Vue代码段,很方便开发 React 开发推荐 React Style Helper 插件名:React Style Helper 功能:在...React更快速地编写内联样式,并对 CSS、LESS、SASS 等样式文件提供强大辅助开发功能 自动补全 跳转至样式变量定义位置 创建 JSX/TSX 行内样式 预览样式及变量内容 行内样式自动补全...ES7 Reactsnippets 插件名:ES7 React/Redux/React-Native/JS snippets 功能:很多React代码段,很方便开发 vscode-styled-components...属性时 画板作图 插件名:Draw.io Integration 功能:在VSCode画图,支持多人协作编辑图表… Echars 智能提示插件 插件名:echarts-vscode-extension

1.7K40

前端图表可视化应用实践总结

此次改版升级是针对旧学习报告数据展示进行一次优化:增加考试模块、知识点采用更简单表达形式、在视觉交互上更加年轻活泼、并运用了更多数据图表可视化在其数据展示。 ?...它是一个使用ReactD3构建Redefined图表库。具备以下特性: 支持React组件,声明式标签,写图表写 HTML 一样简单。...recharts提供基于react组件写法,去写可定制化svg图形。比如下面:用组件svg 来定制Label位置样式。...很显然可以通过一个轮播组件来实现,但是这个模块还具备柱状图展示。要选择一个兼具轮播图表组件,还要保证两者功能样式都可按需求定制。...显然这并不容易,即便存在这样组件也要花上不少时间去寻找筛选。 ? 这时就要权衡,到底是在一个轮播组件添加图表,还是改造图表组件为轮播。这里选择基于轮播组件来写里面的柱状图这个方案。

83820

2023 最新最全 VSCode 插件推荐!

CSS Peek 使用该插件,可以直接从 HTML JavaScript 文件快速导航编辑外部样式定义 CSS 样式。...该插件有利于处理大型或复杂 CSS 样式表,因为它可以快速查找编辑应用于特定元素样式,而无需浏览多个文件或搜索大量代码。...此外,它还会突出显示代码树开始结束标签。如果需要,可以自定义样式以使下划线更加突出。...TODO Highlight 如果想在将代码发布到生产环境之前提醒自己注意事项或代码未完成事情,TODO Highlight VS Code 插件会非常有用。...往期推荐 学习小圈子 离谱! 寒假,学弟竟然啃完了Java学习路线( 系统上线前,被坑了。。 数据库锁 12 连问,抗住!

2.7K30

2022 年 React 生态

今天文章,我们我们将从状态管理、样式动画、路由、代码风格等多个方面来看看 React 最新生态,希望你以后在做技术选型时候能够有所帮助。...CSS 属性样式对象作为 HTML 样式属性键/值对,从内联样式基本 CSS 开始就可以。...这样,它就不会意外泄露到其他 React 组件样式。你应用某些部分仍然可以共享样式,但其他部分不必访问它。...通常还需要一些其他功能,例如密码重置密码更改功能。这些能力远远超出了 React 范畴,我们通常会把它们交给服务端去管理。...当你在某个时间点再次运行测试时,将创建另一个快照,这个快照会前一个快照进行 diff。如果存在差异,Jest 将发出警告,你要么接受这个快照,要么更改一下组件实现。

5.7K20

11个React Native 组件库 Javascript 数据可视化库

该库为 iOS Android 提供了一组跨平台组件,所有组件都是可组合可定制。每个组件还具有与其他组件一致预定义样式,这使得无需手动定义复杂样式就可以构建复杂组件。...4.UI Kitten 超过 3 k stars UI Kitten 提供了一个可定制可重用 react-native 组件工具包,该工具包基于将样式定义移动到特定位置概念,使组件可重用,并以一种单一方式设计样式...通过传递一组不同变量,可以很容易地动态更改主题。这里有一个不错 Expo 事例,可看看。 5. React Native Material UI ?...文档很少(但很全),它简单性设计吸引了眼球。 Javascript 数据可视化库 1. D3js ?...它还提供了各种 API 回调来访问图表状态。 通过使用它们,你甚至可以在渲染后更新图表,看看这些例子。 9. React Virtualized + React Vis + Victory ?

11.4K11

前端图表可视化应用实践总结

此次改版升级是针对旧学习报告数据展示进行一次优化:增加考试模块、知识点采用更简单表达形式、在视觉交互上更加年轻活泼、并运用了更多数据图表可视化在其数据展示。...它是一个使用ReactD3构建Redefined图表库。具备以下特性: 支持React组件,声明式标签,写图表写 HTML 一样简单。...recharts提供基于react组件写法,去写可定制化svg图形。比如下面:用组件svg 来定制Label位置样式。...很显然可以通过一个轮播组件来实现,但是这个模块还具备柱状图展示。要选择一个兼具轮播图表组件,还要保证两者功能样式都可按需求定制。...显然这并不容易,即便存在这样组件也要花上不少时间去寻找筛选。 这时就要权衡,到底是在一个轮播组件添加图表,还是改造图表组件为轮播。这里选择基于轮播组件来写里面的柱状图这个方案。

70410

styled-components不完全手册

这样做好处就是 见名知意,通过组件名称我们就可以知晓该页面使用了何种布局 布局样式组件内部样式进行分割 统一管理 然后,它背后用技术就是我们在CSS-in-JS。... 开始,并用「反引号」括起样式。 现在,当我们使用这个自定义组件时,它将具有带有样式 属性。...在我们给它样式之后,我们可以给它任何我们想要 HTML 标签,以便这个自定义组件将拥有该标签。...我们将在 src 创建一个名为 components 新文件夹,并创建文件 Title.js Buttons.js 来分离标题按钮样式。...扩展样式 通过上述操作,我们已经拥有了一定样式封装能力自定义组件了。此时,我们想在之前组件基础上进行二次封装。从语言开发角度来讲,就是我们想继承之前样式,并且做额外操作。

6010

React】620- 为React应用制作动画5种方法

无论如何,您需要了解有关该附加组件三件事: 当组件生命周期更改时,ReactTransitionGroup会更改类。反过来,动画样式应该在CSS类描述。...React-animation可与支持使用对象定义关键帧动画(例如Radium,Aphrodite或样式化组件)任何内联样式库一起使用。更喜欢使用样式组件。 下面是一些动画:?? ?...它允许您使用props控制所有动画,例如:位置,延迟,距离,级联等。您可以在这里[4]看到它们,您也可以使用自定义CSS效果。它还具有服务器端渲染高阶组件。...使用数组方法map后,您可以渲染 Fade 组件每个元素,并将我们项目插入标题。Const样式为我们标题提供了简短css样式,我们有5个方块从顶部淡出动画。...想给你看一个简短版本,因为所有的元素都有一个相似的动画。 选择了带有绿色球一个元素(例如红色正方形)作为背景地球仪。我们动画看起来像这样。 ?

3.9K20

在微信小程序上做一个「博客园年度总结」:在小程序上使用echarts

在博客园年度总结,有2张柱状图,分别是月度新增随笔趋势年度新增随笔趋势 本文继续介绍一下如何在小程序中使用echarts插入图表 1、下载依赖文件 下载地址:echarts-for-weixin...x_data: 柱状图横轴数据 y_data: 柱状图纵轴数据 interval: 柱状图纵轴间距(因为2个柱状图都用这个函数来定义样式,但是它们纵轴数值差距较大,需要分开定义间距) (3)定义渲染图表函数...分别为柱状图横轴、纵轴数据; 在这个函数调用了图表样式函数setOption(); 另外, this.echartsComponnet、 this.echartsComponnet2在后面的onLoad...()中会定义 (4)在wxml文件配置图表展示位置 打开所在页面的wxml文件,分别添加月度数据年度数据位置代码 ... ... ... ......其中标签id属性ec属性我们定义了2个不同值 (5)打开js文件,从后端接收数据传给echarts组件 先在data配置echarts延迟加载,也就是给wxmlec-canvas标签ec

84620

react-navigation,刷新你导航一、属性介绍二、案例

需要给每一项都设置 tabBarLabel:设置标签title 以下属性配合导航使用 tabBarPosition:设置tabBar位置,属性值为topbottom。...iOS默认在底部,安卓默认在顶部 swipeEnabled:是否允许在标签之间进行滑动 animationEnabled:是否在更改标签时显示动画 lazy:是否在app打开时候将底部标签栏全部加载...tabStyle:tab样式 indicatorStyle:标签指示器样式对象(选项卡底部行)。...活动标签背景颜色 inactiveTintColor - 非活动标签标签图标颜色 inactiveBackgroundColor - 非活动标签背景颜色 内容部分样式样式对象 labelStyle...- 当您标签是字符串时,要覆盖内容部分文本样式样式对象 二、案例 2.1StackNavigation案例 集成第三方库 使用npm安装react-navigation库,--save表示将该组件写入到

19.6K90

探索 IntelliJ IDEA 2024.1最新变化:全面升级助力编码效率

如果现有项目恰巧使用较旧代码样式而未显式配置,IDE 将自动切换到 Kotlin 编码约定代码样式,并提醒您此更改。 为了防止不必要格式更改,我们建议您了解此代码样式迁移指南。...在 Log(日志)标签显示审查分支更改选项 IntelliJ IDEA 2024.1 通过提供分支相关更改集中视图简化了代码审查工作流。...对于 GitHub、GitLab Space,现在可以在 Git 工具窗口中单独 Log(日志)标签查看具体分支更改。...我们为 Spring 图表引入了新图标,增强了 Spring 原型(如组件、控制器、仓库配置 Bean)可视化。 此外,您现在可以方便地切换库 Bean 可见性(默认隐藏)。...针对 React props 状态创建快速修复 Ultimate IntelliJ IDEA Ultimate 2024.1 为 React 引入了多个新快速修复,可供动态创建 props 状态

1.5K20

React Vue 构建了同款应用,来看看哪里不一样(2020 版)

作者 | Sunil Sandhu 译者 | 王强 策划 | 小智 几年前,决定试着分别在 React Vue 构建一个相当标准 To Do(待办事项)应用。...这是因为在 create-react-app ,默认每个 React 组件都会附带一个单独文件来保存其样式,而 Vue CLI 用单一文件来为默认组件包含 HTML、CSS JavaScript...开发社区关于 CSS 结构化方式这个话题有大量讨论,尤其是 React 这块,因为有许多 CSS-in-JS 解决方案,诸如样式化组件 emotion 等。...React: 在 React ,我们将 props 传递到子组件创建位置。...当然,React Vue 之间还有其他许多小差异癖好,但我希望本文内容有助于大家理解这两个框架是如何处理事物。 如果你有兴趣 fork 本文中使用样式,并想制作自己类似作品,请自便!

4.8K30

Matplotlib 可视化之图表层次结构

每一根spines上都可以装饰有主刻度次刻度(可以指向内部或外部)、刻度标签标签。默认情况下,matplotlib只装饰左边下面的spines边框。 Axis轴 有刻度spines边线称为轴。...水平是x轴,垂直是y轴。每个轴每一个都是由一个spines轴线,主刻度、次刻度、主刻度标签、次刻度标签一个轴标签组成。 Spines轴线 Spines是连接轴刻度线和数据区域边界轴线。...Tick Locator Tick Locator 主要设置刻度位置,这在绘图教程主要是用来设置副刻度(minor),而 Formatter 则是主要设置刻度形式。...更改刻度、刻度标签网格线外观。...格式字符串是用于快速设置基本线条样式缩写,这些样式或更多样式可通过关键字参数来实现。

4.3K30

2020 年你应该知道 React

所有的工具都对您隐藏起来了,但是最终要由您来更改这些工具。 如果你已经熟悉 React,你可以选择它流行入门工具包之一: Next.js Gatsby.js。...建议: React Router React 样式库 虽然关于 React 样式处理有很多解决方法,但是作为一个 React 初学者,刚开始使用内联样式基本 CSS 是很好。...Group React 可视化图表库 如果你真的想自己从头开始构建图表,你没办法不去学习 D3 。...建议: ESLint Prettier React 认证 在较大 React 应用程序,您可能希望引入具有注册、登录退出功能身份验证。此外,密码重置密码更改功能往往是需要。...,只能想到以下内容,因为没有在 React 中使用任何其他内容: Draft.js Slate React 支付 其他网络应用一样,最常见支付提供商是 Stripe PayPal。

14.4K40

TDesign 更新周报(2022 年 5 月第 1 周)

枚举值,用于支持基于鼠标位置定位 BugFixes Table: 修复默认情况,表尾吸底显示与否计算遗漏问题 修复加载状态会导致拖拽排序失效问题 修复表格sorter:true且ellipsis:true...时样式冲突问题 TS类型TableColumns[0]在严格模式下使用问题 Table:renderExpandedRow改为非必填 全局配置:修复animation属性excludeinclude...在TS中都必填问题 Datepicker:修复weekday英文翻译顺序问题 Others Table:TS 类型全部移入 interface.ts 文件,并导出 Calendar:对value属性功能进行修正...:修复add方法点击报错 Textarea:修复autofocus参数更新无法聚焦 Select:修复在结合option使用下render告警 Slider:将marks属性更改为响应性属性,并内部修复...调整图表相关代码目录结构,图表部分代码调整至所在 Page 内,减少各页面模块耦合 调整表格相关代码及展示,增加吸顶功能展示、去除minWidth使用等 详情见:https://github.com

5.3K50
领券