Wrap material-ui form contents in Grid items

This commit is contained in:
Juho Teperi 2018-10-12 23:56:44 +03:00
parent d0812152bc
commit bd7a2b5a99

View File

@ -70,8 +70,10 @@
(defn form [{:keys [classes] :as props}]
[:> mui/Grid
{:container true
:direction "column"}
:direction "column"
:spacing 16}
[:> mui/Grid {:item true}
[:> mui/Toolbar
{:disable-gutters true}
[:> mui/Button
@ -88,8 +90,9 @@
:class (.-button classes)
:on-click #(reset! text-state "")}
"Reset"
[:> mui-icons/Clear]]]
[:> mui-icons/Clear]]]]
[:> mui/Grid {:item true}
[text-field
{:value @text-state
:label "Text input"
@ -98,8 +101,9 @@
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:inputRef #(js/console.log "input-ref" %)}]
:inputRef #(js/console.log "input-ref" %)}]]
[:> mui/Grid {:item true}
[text-field
{:value @text-state
:label "Textarea"
@ -110,8 +114,9 @@
(reset! text-state (.. e -target -value)))
:multiline true
;; TODO: Autosize textarea is broken.
:rows 10}]
:rows 10}]]
[:> mui/Grid {:item true}
[text-field
{:value @text-state
:label "Select"
@ -127,8 +132,9 @@
;; Same as previous, alternative to adapt-react-class
[:> mui/MenuItem
{:value 2}
"Item 2"]]
"Item 2"]]]
[:> mui/Grid {:item true}
[:> mui/Grid
{:container true
:direction "row"
@ -145,7 +151,7 @@
[:> mui/Grid {:item true}
[:> mui/Chip
{:icon (r/create-element mui-icons/Face)
:label "Icon element example, r/create-element"}]]]])
:label "Icon element example, r/create-element"}]]]]])
(defn main []
;; fragment