hyperstack-org / hyperstack-org/hyperstack

Elegant usage of Material design Components and Icons.

Aperta
#273 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
538
Fork
41
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.