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 摘要。