hyperstack-org / hyperstack-org/hyperstack

Elegant usage of Material design Components and Icons.

オープン
#273 コメント 3 件 リアクション 0 件 担当者 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 を短くまとめたダイジェスト。