hyperstack-org / hyperstack-org/hyperstack

Elegant usage of Material design Components and Icons.

Aberta
#273 3 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
JavaScript
Estrelas
538
Forks
41
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

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.

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.