RubyUI (Former PhlexUI): Ruby Gem for RubyUI Components

Source | HN Comments

本文介绍了 `RubyUI`，一个基于 Ruby 的 gem，用于构建 RubyUI 组件。它前身是 `PhlexUI`，提供可复用的、可定制的 UI 组件，并声称比传统 Rails 模板更快。文章详细介绍了其主要特点、使用方法、安装步骤以及与其它方法的性能比较。`RubyUI` 允许开发者复制粘贴组件代码，并根据需求进行自定义。

RubyUI (前身 PhlexUI)：用于 RubyUI 组件的 Ruby Gem

跳转到内容

导航菜单

切换导航

产品
解决方案按公司规模
- 企业版
- 中小型团队
- 创业公司
- 非营利组织按使用案例
- DevSecOps
- DevOps
- CI/CD
- 查看所有使用案例按行业
- 医疗保健
- 金融服务
- 制造业
- 政府部门
- 查看所有行业查看所有解决方案
资源主题
- AI
- DevOps
- 安全
- 软件开发
- 查看所有浏览
- 学习路径
- 活动和网络研讨会
- 电子书和白皮书
- 客户案例
- 合作伙伴
- 高管见解
开源
企业版
定价

搜索或跳转到...

搜索代码、仓库、用户、问题、拉取请求...

搜索清除搜索语法提示

提供反馈

我们会阅读每一条反馈，并认真对待您的意见。包含我的电子邮件地址，以便与我联系取消提交反馈

保存的搜索

使用保存的搜索可以更快地过滤结果

名称查询要查看所有可用的限定符，请参阅我们的文档。取消创建已保存的搜索登录注册重置焦点您在另一个选项卡或窗口中登录。重新加载以刷新您的会话。您在另一个选项卡或窗口中注销。重新加载以刷新您的会话。您在另一个选项卡或窗口中切换了帐户。重新加载以刷新您的会话。忽略警报 {{ message }} ruby-ui / **ruby_ui ** 公开

通知您必须登录才能更改通知设置
Fork 45
Star 493

用于 RubyUI 组件的 Ruby gem rubyui.com

许可证

MIT license 493 stars 45 forks Branches Tags Activity Star 通知您必须登录才能更改通知设置

其他导航选项

ruby-ui/ruby_ui

main 分支标签转到文件代码

文件夹和文件

名称| 名称| 最后提交消息| 最后提交日期 ---|---|---|---

历史记录

仓库文件导航

RubyUI (前身 PhlexUI) 🚀

设计精美的组件，您可以将其复制并粘贴到您的应用程序中。可访问。可定制。开源。这不是一个组件库。这是一个可重复使用的组件集合，您可以生成或复制并粘贴到您的应用程序中。选择您需要的组件。将代码复制并粘贴到您的项目中，并根据您的需要进行自定义。代码是您的。使用它作为构建您自己的组件库的参考。

主要特点：

专为速度而生 ⚡：RubyUI 利用 Phlex，它比传统的 Rails ERB 模板快 12 倍。
令人惊叹的 UI 🎨：设计美观、精简且可定制的 UI，轻松销售您的应用程序。
保持井井有条 📁：让您的 UI 组件井井有条且易于管理。
以客户为中心的 UX 🧑‍💼：为您的用户创造难忘的应用程序体验。
完全可定制 🔧：完全控制所有组件的设计。
最小依赖 🍃：使用定制的 Stimulus.js 控制器来保持您的应用程序精简。
轻松重用 ♻️：构建一次组件，并在您的项目中无缝使用它们。

如何使用：

找到完美的组件 🔍：在我们的文档页面上浏览实时嵌入的组件。
复制片段 📋：轻松复制代码片段以快速实现。
让它成为你的 🎨：使用 Tailwind 实用程序类自定义组件以适应您的特定需求。

安装 🚀

1. 安装 gem

bundle add ruby_ui --group development --require false

或将其添加到您的 Gemfile 中：

gem "ruby_ui", group: :development, require: false

2. 运行安装程序：

bin/rails g ruby_ui:install

3. 完成！🎉

您可以使用 ruby_ui:component 生成器生成您的组件。

bin/rails g ruby_ui:component Accordion

文档 📖

访问 https://rubyui.com/docs/introduction 查看完整文档，包括：

详细的组件指南
主题
Lookbook
入门指南

速度比较 🏎️

由 Phlex 驱动的 RubyUI 优于其他方法：

Phlex：基准 🏁
ViewComponent：慢约 1.5 倍 🚙
ERB 模板：慢约 5 倍 🐢

请参阅 @KonnorRogers 的原始视图层基准及其变体。

Importmap 说明：

如果您遇到 importmap 问题，这个 stackoverflow 问题可能会有所帮助：https://stackoverflow.com/questions/70548841/how-to-add-custom-js-file-to-new-rails-7-project/72855705

许可证 📜

关于