Radix UI 3.0 发布,新的布局引擎

这篇具有很好参考价值的文章主要介绍了Radix UI 3.0 发布,新的布局引擎。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Radix UI 3.0 刚刚发布,带来了新的布局引擎、新的组件和自定义调色板生成器,这个版本的发布是向着成为构建现代应用程序的最佳组件库迈出了一大步。我们将在本文中介绍主要亮点。

自定义调色板

Radix Themes 配备了近 30 种颜色比例,每种都有自己的浅色、深色和 alpha 变体。在内部,颜色系统由 Radix Colors 提供支持。

Radix Colors 是一个全面的色彩系统,用于设计美观、易于访问的网站和应用程序。

radix-ui vue,前端,javascript,node.js,typescript,vue.js

每个比例都经过调整,以提供完全可访问的对比度,每个比例都对应于背景、交互组件、边框和文本。提供您使用过的最美丽、最直观的色彩系统。

今天,我们推出了一种新工具,可让您为 Radix 主题创建自己的品牌调色板。它是一个简单的界面,可让您指定主色、灰色和页面背景,生成颜色配置以复制粘贴到您的主题样式中。

radix-ui vue,前端,javascript,node.js,typescript,vue.js

新组件

Radix Themes 3.0 引入了许多用于构建仪表板和数据密集型界面的新组件。它们的构建和设计符合您对 Radix 的期望,并且像往常一样,键盘和屏幕阅读器用户也可以使用它们。以下是主要亮点的快速概述。

Spinner 旋转器

Spinner 是一个简单的动画加载指示器。它配备了一个直观的 API,可以在子级加载完成后有条件地渲染它们。实现看起来毫不费力——本来就是这样的。

Spinner 在获取数据时保留子维度,因此状态之间没有布局转换。这是处理应用程序中加载状态的一种符合人体工程学的方法,因为它最大限度地减少了常见情况下所需的代码分支量。

Skeleton 骨骼

Skeleton 是此版本中的另一个加载组件。Skeleton 具有与 Spinner 类似的 API,但它也完全采用子组件的形状和大小,因此您可以使用与实际中使用的布局完全相同的布局来构建骨架界面。

Segmented Control 分段控制

Segmented Control 采用了熟悉的切换按钮设计,用于在值之间切换。Segmented Control 包了许多精心制作的隐形细节。例如,在活动项目上使用了更加粗体的字重,但没有布局移位,并且动画调整得非常平滑,即使是字重变化也能过渡顺畅。

Data List 数据列表

Data List 是用于显示一组键值对的组件。Data List 有什么特别之处?这是一个常见的模式,看似简单却很难做到完美。在我们设计时,不得不整理出一个包含所有不同布局组合的秘密页面。

Reset 重置

与其他组件不同,Reset 是一个不可见的组件。Reset 会从任何 HTML 标记中删除默认的浏览器样式,并设置惯用的布局默认值,以便您可以在其之上构建自定义组件。

在大多数界面中,这些样式是全局的并影响整个应用程序,因此这往往是删除尽可能多的样式和保留常见默认值之间的折衷方案。 Reset 为几乎所有网站都需要的标准化样式的人体工程学带来了新的变化。

Radio Cards 单选卡片

Radio Cards 是从多个选择中选择一个值的常见模式。它们用于视觉上引人入胜的表单,其中每个选项相比普通的单选按钮具有更高权重。

Checkbox Cards 复选框卡片

Checkbox Cards 与 Radio Cards 类似,但用于选择多个值。

Progress 进度条

Progress 是另一个加载组件。它可用于指示任务的进度,或者使用模糊动画来表示不确定的进展。

Tab Nav 选项卡导航

Tab Nav 是一个用于导航到不同视图的组件。它与类似的 Tabs 相辅相成,但它是建立在提供屏幕阅读器可访问性和针对链接定制键盘导航的 Navigation Menu 之上。

新的布局引擎

新引擎使布局组件及其属性更强大且更易使用。

布局组件是 Radix Themes 的基础功能。它们只有五种:Box、Flex、Grid、Section 和 Container。这些组件用于将布局与内容和交互分离开来。

当您将布局问题与内容和交互分离时,您创建的组合会更易于维护和推理。这些组件允许您快速为应用程序中的视图、页面和其他交互元素添加结构。

更好的布局属性

在此版本中,布局组件已经添加了许多新的属性,并且它们接受的值已经进行了重大改动:用于处理 flex 和 grid 布局的 9 个新属性;用于控制布局组件尺寸的 4 个新属性;除了空间比例值之外,现在所有布局属性都接受有效的 CSS 值,包括在响应式对象语法中使用时。

响应式对象语法

在 Radix Themes 中,响应式对象语法是您如何在不离开 React 代码的情况下,在不同断点上构建响应式布局的方式,这里就是您组合应用程序本身的地方。

考虑以下代码片段:

<Flex width="500px" />

这将创建一个宽度为 500px 的 flexbox 布局。但如果您想在移动设备上使用不同的宽度怎么办?可以使用响应式对象语法来实现,您可以指定在特定断点处要使用的值:

<Flex width={{ initial: '100%', sm: '300px', md: '500px' }} />

除了空间比例值之外,布局属性还将支持有效的 CSS 值。可以在特定断点上使用 100px、50vw 甚至像 calc(100vw - 200px) 这样的表达式。

它的性能如何,它是否与服务器组件一起工作?这就是上面提到的 <Flex> 元素呈现到 DOM 中的方式:

<div
  style={{ '--width': '100%', '--width-md': '500px', '--width-sm': '300px' }}
  class="rt-Flex rt-r-w sm:rt-r-w md:rt-r-w"
/>

您可以看到,<Flex> 元素被编译成一组实用类和 CSS 自定义属性的组合。这意味着性能就像普通的 CSS 一样,并且该组件可以在服务器上渲染。

两全其美的

总共有 5 个布局组件,每个组件有近 40 个 Props。它们共同构成了一个易于学习、快速掌握的系统,并为您在不切换文件和关注点分离的情况下,可以实现的目标设定了令人难以置信的高上限。

如果您从未使用过此类系统,我们建议您尝试一下。它是 Tailwind 的一个很好的替代品,Tailwind 是一个非常强大的工具,最初是为了相同的目的而构建的。然而,今天它已经发展成为一个完整的样式范例,不会阻止您动态创建复杂的样式,这可能会违反前面提到的关注点分离。

Radix Themes 布局具有实用程序类框架可能为布局提供的全部功能,但它也是类型安全的,并指导开发人员与他们正在构建的界面的其他部分保持清晰的边界。

独立布局组件

如果您只想使用 Radix Themes 中的布局组件那也是可以的。只需确保 Tree Shaking 在项目中可以正常工作,并导入布局 CSS:

import '@radix-ui/themes/layout.css';

使用 Astro 和 Remix 进行零配置设置

现在使用 Remix 和 Astro 设置 Radix 主题要容易得多。在 3.0 中,我们重新审视了库的构建方式,以确保对 ESM 环境的开箱即用支持。

该发行版现在是一个混合 ESM/CommonJS 包。根据您的设置,您的导入解析器现在将自动选择正确的版本。

贡献者

Radix Themes 3.0 是许多贡献者辛勤工作的结果。我们要感谢所有为此版本做出贡献的人,无论是通过代码、文档、设计还是社区支持。文章来源地址https://www.toymoban.com/news/detail-855429.html

到了这里,关于Radix UI 3.0 发布,新的布局引擎的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙开发-UI-布局-线性布局

    鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 鸿蒙开发-UI-布局 文章目录 前言 一、基本概念 二、布局子元素 1.子元素

    2024年01月18日
    浏览(45)
  • 鸿蒙开发-UI-布局-栅格布局

    鸿蒙开发-UI-布局 鸿蒙开发-UI-布局-线性布局 鸿蒙开发-UI-布局-层叠布局 鸿蒙开发-UI-布局-弹性布局 鸿蒙开发-UI-布局-相对布局 文章目录 前言 一、基本概念 二、格栅容器组件 1.栅格系统断点 2.布局的总列数 3.排列方向 4.子组件间距 三、格栅容器子组件 1.span 2.offset 3.order 四、

    2024年02月20日
    浏览(39)
  • UEditorPlus v3.3.0 图片上传压缩重构,UI优化,升级基础组件

    UEditor是由百度开发的所见即所得的开源富文本编辑器,基于MIT开源协议,该富文本编辑器帮助不少网站开发者解决富文本编辑器的难点。 UEditorPlus 是有 ModStart 团队基于 UEditor 二次开发的富文本编辑器,主要做了样式的定制,更符合现代浏览器的审美。 在开发过程中解决了部

    2024年02月14日
    浏览(50)
  • 使用 Vue 3.0 和 Element UI 实现功能增加和按钮操作详解

    简介: 在现代前端开发中,使用 Vue 3.0 和 Element UI 可以快速构建出功能强大、用户友好的界面。本篇技术博客将介绍如何结合 Vue 3.0 和 Element UI,实现功能增加和按钮操作的具体步骤和技巧。 首先,确保已经正确安装了 Vue 3.0 和 Element UI。可以通过 npm 或 yarn 进行安装,并在

    2024年02月04日
    浏览(40)
  • 【Android】UI布局之线性布局(登录界面代码)

    1、布局管理 组件在activity中呈现的方式,包含组件大小、间距、对齐方式 Android提供了两种布局的实现方式: .在xml配置文件中声明,通过setContentView(R.layout.main)方法呈现在activity中,通过findViewById()方法获得组件实例。(一般推荐这种方式) 动态生成组件以及设置相关布局

    2024年02月11日
    浏览(46)
  • 鸿蒙开发-UI-布局

    鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 鸿蒙开发-UI-组件 鸿蒙开发-UI-组件-状态管理 鸿蒙开发-UI-应用-状态管理 鸿蒙开发-UI-渲染控制 文章目录 前言 一、布局概述 1.布局结构 2.布局元素组成 3.布局分类 4.布

    2024年01月16日
    浏览(42)
  • UI位置与布局

    发现UGUI的RectTransform定位还是很复杂的,感觉有必要详细了解一下 继承自Transform。他的local position由其他几个变量控制。建议不要直接设置position 目的是为了实现UI自动布局。这套方法将绝对定位,相对定位,百分比定位等整合在一起,可以说非常灵活,不过同时增加了复杂度

    2024年02月11日
    浏览(32)
  • 现代化个人博客系统 ModStartBlog v7.3.0 首页热门博客,UI优化调整

    ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。 系统完全开源,基于 Apache 2.0 开源协议。 丰富的模块市场,后台一键快速安装 会员模块通用且完整,支持完整的API调用 大文件分片上

    2024年02月11日
    浏览(47)
  • QT UI布局设置汇总

    1、设置容器边框和内部控件的边距 a)、可以通过设置setContentsMargins方法  如上图,外面的是myQwidget,内部假设是一个填满的button,那么设置setContentsMargin,可以控制left和top,right,bottom等四个边距的距离。 b)、也可以使用layoutLeftMargin等属性。 这个可以设置容器内部控件之间

    2024年02月06日
    浏览(38)
  • Unity UI自动拓展布局

    首先文字自动拓展很简单,只需要在Text物体里增加个ContentSizeFItter组件,选择你需要的拓展方式(横向和纵向)将其选择 PreferredSize 选项就可以了。 那么再往上,如果需要文字拓展带动上层拓展的话,就需要在文字父物体上加上两个组件,第一个是 LayoutGroup 组件,这个组件

    2024年02月06日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包