hyperstack-org / hyperstack-org/hyperstack

Elegant usage of Material design Components and Icons.

未关闭
#273 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
JavaScript
星标
538
派生
41
PR 合并指标
30 天内没有已合并 PR

描述

Might be useful for others. The results are really impressive

`yarn add @material-ui/core --save `

```js
// append in client_and_server.js
Mui = require('@material-ui/core');
Mui.default = Mui;
```

```ruby
# example hyperstack/components/hyper_component.rb

class HyperComponent
include Hyperstack::Component
include Hyperstack::State::Observable
param_accessor_style :accessors

def __material_component(component_name, **options, &block)
Mui.send(component_name, options, &block)
end

def __material_icon(icon_name, **options)
__material_component("Icon", options) { icon_name.underscore }
end

def method_missing(method_name, *_args, **options, &block)
classified_name = method_name.classify
name_without_icon = method_name.sub("Icon", "")

if classified_name == method_name && `Mui[#{method_name}]`
__material_component(method_name, **options, &block)
elsif name_without_icon != method_name && classified_name == method_name
__material_icon(name_without_icon, **options, &block)
else
super
end
end
end

```

```html
# for icons inside application.html.erb

```

```rb
# example navbar, translation from react to hyperstack
# render it inside app.rb with Page::Navbar()

module Page
class Navbar < HyperComponent
#
#
#
#
#
#
# News
#
# Login
#
#

render do
AppBar position: :static do
Toolbar do
IconButton edge: :start, color: :inherit, "aria-label": "menu" do
MenuIcon()
end

Typography(variant: :h6) { "News" }

Typography do
Button(color: :inherit) { "Login" }
end
end
end
end
end
end
```

I'll keep you guys posted if I have a example running DirectUpload from ActiveStorage.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。