hyperstack-org / hyperstack-org/hyperstack
Elegant usage of Material design Components and Icons.
- Lenguaje dominante
- JavaScript
- Estrellas
- 538
- Forks
- 41
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
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.
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.