这一周很忙,在完成我们一直在做的一堆项目,但所有东西终于发布了,所以感觉是时候做另一个更新了。
自从我上次发帖以来,我们已经分类并解决了另外226 个 GitHub issues 和 pull requests,我们终于第一次在整个组织中将开放的 issues/PRs 降到了 50 个以下。所以请停止发现 bug,我只是想用 Tailwind CSS 设计和构建一会儿漂亮的东西。
说到漂亮的东西,以下是过去几周发布的内容!
聚焦: 你的新个人网站
几天前,我们发布了Spotlight,这是我们为 Tailwind UI 设计的一个令人惊叹的新个人网站模板。
像我们的其他模板一样,它是用 Next.js 构建的,这次我们使用 MDX 来处理所有的 markdown 驱动的内容,比如博客部分。
设计这个模板是一个非常有趣和有挑战性的过程——我们想要设计出一个非常美丽和鼓舞人心的东西,但同时也足够不具侵略性,适合几乎任何人。我们最终选择了一个相当简约的设计,通过旋转的图像、链接的颜色提示以及在顶部导航等地方的阴影和分层等细微的深度来展现其个性。
一如既往,我建议查看现场预览以获得完整体验——特别注意主页上的头像和导航在滚动时的工作方式,当你在实际网站上玩的时候,它非常 _chef's kiss。
我们试图按照我们自己个人网站的结构来构建这个网站,所以它包括一个专门的博客,一个页面,你可以列出你工作过的一些最喜欢的项目,一个区域,你可以链接到你做过的会议演讲,以及一个"uses" 页面来列出你所有喜欢的工具和设备。
如果你有一个Tailwind UI 全访问许可证,那么你已经可以访问这个模板了!如果没有,请考虑一下——这是支持我们在开源项目上工作的最佳方式,比如 Tailwind CSS、Headless UI 和 Heroicons。
Heroicons v2.0
去年我们发布了Heroicons v1.0。上周我们发布了Heroicons v2.0,这是一个全新的图标集,从头开始绘制,Steve 已经工作了大约一年。
它包括 280 个图标,分为三种不同的风格:
- Outline — 线条图标,笔画为 1.5px,在 24px 视图框中绘制。
- Solid — 实心图标,填充形状,在 24px 视图框中绘制。
- Mini — 实心图标,填充形状,在 20px 视图框中绘制。
与 v1 的最大区别在于,轮廓集使用了更细的笔画,这在这些天感觉更现代和时尚,而且视觉上图标的风格更为俏皮。
即使这些图标名称中有 "v2",但最好将 Heroicons v2 看作是终结者 2 而不是 OpenSSL 2——我们觉得它们代表了我们最好的作品,但这是一个新的图标集,而不是原始图标集的严格升级。不要像对待真正的应用程序依赖项那样感到有压力去升级现有项目,但如果你想迁移,请查看发布说明以获取切换所需的所有信息。
要探索所有新图标,请访问我们与新图标集一起推出的完全重新设计的 Heroicons 网站。
Headless UI v1.7
本周早些时候,我们发布了Headless UI的新版本,我们的 React 和 Vue 库的无样式 UI 组件。
Headless UI v1.7 包括通常的错误修复和改进,但也有一些非常有用的新功能!
添加 "by" 属性以控制对象比较
我们在 Listbox、Combobox 和 RadioGroup 组件中添加了一个新的 by 属性,使得将对象绑定为表单值变得不那么麻烦。
import { Listbox } from "@headlessui/react";const departments = [ { id: 1, name: "Marketing", contact: "Durward Reynolds" }, { id: 2, name: "HR", contact: "Kenton Towne" }, { id: 3, name: "Sales", contact: "Therese Wunsch" }, { id: 4, name: "Finance", contact: "Benedict Kessler" }, { id: 5, name: "Customer service", contact: "Katelyn Rohan" },];function DepartmentPicker({ selectedDepartment, onChange }) { return ( <Listbox value={selectedDepartment} by="id" onChange={onChange}> <Listbox.Button>{selectedDepartment.name}</Listbox.Button> <Listbox.Options> {departments.map((department) => ( <Listbox.Option key={department.id} value={department}> {department.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> );}这使得值来自组件外部变得更加容易,并且节省了你只需绑定 id 或类似的东西,并在需要时自己查找完整对象的麻烦。
查看更新的"将对象绑定为值" 文档以获取更多详细信息。
使用表单控件作为非受控组件
Listbox、Combobox 和 RadioGroup 组件现在允许你选择传递 defaultValue 而不是 value,从而允许你将它们用作非受控组件。
import { Listbox } from "@headlessui/react";const people = [ { id: 1, name: "Durward Reynolds" }, { id: 2, name: "Kenton Towne" }, { id: 3, name: "Therese Wunsch" }, { id: 4, name: "Benedict Kessler" }, { id: 5, name: "Katelyn Rohan" },];function Example() { return ( <form action="/projects/1/assignee" method="post"> <Listbox name="assignee" defaultValue={people[0]}> <Listbox.Button>{({ value }) => value.name}</Listbox.Button> <Listbox.Options> {people.map((person) => ( <Listbox.Option key={person.id} value={person}> {person.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> <button>Submit</button> </form> );}这可以简化你在使用传统 HTML 表单或使用 FormData 收集其状态的表单 API 时的代码,而不是使用 React 状态来跟踪它。
查看"作为非受控组件使用" 文档以查看更多示例。
用于仅 CSS 状态样式的数据属性
历史上,你总是需要通过检查通过渲染 prop 传递的参数并有条件地渲染任何类或内容来样式化 Headless UI 组件的不同状态。当只是尝试调整背景颜色或进行其他仅 CSS 更改时,这可能感觉像是很多样板代码。
在 Headless UI v1.7 中,我们在渲染的 HTML 中添加了一个 data-headlessui-state 属性,其中包含有关当前状态的信息,因此你可以仅使用 CSS 进行定位。
我们还发布了一个新的@headlessui/tailwindcss 插件,它为这些状态提供了变体,因此你可以使用 Tailwind CSS 类轻松地进行样式化:
<Listbox.Option key={person.id} value={person} className="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"> <CheckIcon className="ui-selected:block hidden" /> {person.name}</Listbox.Option>查看有关使用数据属性进行样式化的新文档以获取更多详细信息。
Tailwind Play 上的 Insiders 支持
并不是每个人都知道这一点,但我们向 npm 发布了一个 insiders 版本的 Tailwind CSS,每次在存储库中有新提交时都会自动构建和部署。这使得在正式发布之前测试新功能和修复变得非常容易。
现在我们在Tailwind Play 中也包含了对 insiders 版本的访问,因此你可以在不设置项目的情况下玩最新的东西:
我们只在 Play 上保留最新的 insiders 版本,因此如果你使用 insiders 版本创建了一个演示,请注意,如果下一个 insiders 版本更改了你正在使用的某个未发布功能,它可能会中断。你不应该在那里放置重要的东西,来吧,做个专业人士。
Tailwind CSS + Phoenix v1.7
前段时间,我们开始与Phoenix 团队讨论,因为他们希望在未来的版本中默认提供 Tailwind CSS。我认为这非常令人兴奋,并希望与他们合作,使开箱即用的体验非常美好。
我们设计了一个新的启动屏幕和所有必要的脚手架,用于他们的生成器系统,这将作为 Phoenix v1.7 的一部分发布。
Phoenix 的创建者 Chris McCord 上周做了一个精彩的演讲,介绍了他们发布的所有 Tailwind CSS 内容,如果你想了解更多,值得一看。
所以,这就是我们过去几周一直在做的最酷的东西!
在接下来的一个月左右,我很高兴能构建我们一直在设计的一堆新的 Tailwind UI 组件,探索一些Tailwind CSS 的新功能想法,并开始研究创建一个带有 Tailwind + Next.js 的应用程序入门模板的样子——如果我们能做到这一点,我认为这可能会非常酷。
在下次更新中见!