编码美丽
Visualise a satisfying feeling of progression in your app with the help of beautiful-skill-tree.
借助beautiful-skill-tree，在您的应用程序中可视化令人满意的进度感觉。
什么是美丽技能树？ 🌳 (What is beautiful-skill-tree? 🌳)
beautiful-skill-tree came about as as result of my love for video games, web development and fitness. BST was never intended to be a standalone package, but a feature in a fitness progress app. After discovering that there were no easy-to-use libraries that empower developers to create their own versatile skill trees, BST ended up manifesting as exactly that.
因为我对视频游戏，网络开发和健身的热爱，使之成为了美丽的技能树 。 BST从未打算成为独立软件包，而是Fitness Progress应用程序中的功能 。 在发现没有易于使用的库可以使开发人员创建自己的通用技能树之后，BST最终以这种方式体现出来。
My key motivation for beautiful-skill-tree is to create a package that can be used across a series of browsers and devices, with interactions that feel intuitive, sleek, and gratifying.
我创建“美丽技能树”的主要动机是创建一个可在一系列浏览器和设备上使用的程序包，其交互感觉直观，流畅且令人满足。
While developer experience was a major consideration when creating BST, I wanted usability to be BST's key measurement for success. Thanks to tools like Browserstack, BST has been tested and validated across a series of operating systems, browsers and devices. And thanks to my friends, family (incl. my grandmother), coworkers, and strangers in ensuring that it has been tested across a diverse range of people.
虽然开发人员的经验是创建BST的主要考虑因素，但我希望可用性成为BST成功的关键指标。 由于使用了Browserstack之类的工具，BST已在一系列操作系统，浏览器和设备上进行了测试和验证。 还要感谢我的朋友，家人(包括我的祖母)，同事和陌生人，确保它已在各种人群中得到测试。
我可以用美丽技能树做什么？ 🌴 (What can I do with beautiful-skill-tree? 🌴)
Currently, the most comprehensive use of beautiful-skill-tree in the wild is Calisthenics Skills.
当前，在野外最广泛地使用美丽技能树是健美操技能 。
Setting up BST in your own application is straightforward, with the official README guiding you through the key features in great detail.
在您自己的应用程序中设置BST非常简单，官方的README指导您详细了解关键功能。
Once you've imported the components and configured the SkillTree, all that's left is to supply your own data. For those, like myself, who are TypeScript nerds, BST exports types to ensure that your data adheres to the structure required. If usability is my bottom-line measure for success, developer experience places a close second.
导入组件并配置SkillTree ，剩下的就是提供您自己的数据。 对于像我这样的TypeScript书呆子，BST会导出类型以确保您的数据符合所需的结构。 如果可用性是我成功的底线，那么开发人员的经验将紧随其后。
Here's what beautiful-skill-tree offers you:
这是美丽技能树为您提供的：
- 📈 A way to visualise user progression in your application to在应用程序中可视化用户进度的方法
- 🖥️ Responsive, cross-browser compatible trees 🖥️自适应，跨浏览器兼容的树
- 🕸️ Silky smooth animations 🕸️柔滑的动画
- ⌨️ Keyboard navigable trees Keyboard️键盘可导航树
- 🍂 Collapsible trees trees可折叠的树木
- 🎨 Custom theming 🎨自定义主题
- 💾 Saving to localstorage out-of-the-box 💾开箱即用地保存到本地存储
- ✍🏿 Option to implement custom saving ✍🏿实现自定义保存的选项
- ❓ Optional nodes ❓可选节点
- 📊 Access to your tree's data and methods 📊访问树的数据和方法
除了v1，我还能期待什么？ 🎄 (What can I expect beyond v1? 🎄)
- Custom pre-requisites to to unlock/select skills 解锁/选择技能的自定义前提条件
- Searching/Filtering through trees and skills 通过树木和技能进行搜索/过滤
- Features as a result of insight received from feedback 来自反馈的洞察力所带来的功能
In the future, I'll talk about some of the challenges I've come across during the creation and development of BST, and the User Experience lessons I've learnt along the way. Stay tuned!
将来，我将讨论在BST的创建和开发过程中遇到的一些挑战，以及在此过程中我所学到的用户体验课程。 敬请关注！
And a big thanks to everyone that has used beautiful-skill-tree in the past!
非常感谢过去使用过美丽技能树的每个人！
Have you used beautiful-skill-tree in your own project? You can leave anonymous feedback and feature suggestions here. You can try it out here
您是否在自己的项目中使用过美丽技能树？ 您可以在此处留下匿名反馈和功能建议。 你可以在这里尝试
If you're interested in keeping up-to-date with any of my projects you can find me in the following places:
如果您有兴趣了解我的任何项目的最新信息，可以在以下位置找到我：
翻译自: https://www.freecodecamp.org/news/beautiful-skill-tree-is-officially-v1/
编码美丽
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
