Hi Fernando,
Using semantic-ui css only works pretty good in my experience.
We don't include js files and trigger class changes on state changes.
(def modal-state (reagent/atom false))
(defn current-page []
[:div [:a.ui.btn {:on-click (fn [_] (reset! modal-state true))} "open
modal"]])
(defn modal []
(when @modal-state
(let [close #(reset! modal-state false)]
[:div.ui.dimmer.modals.page.transition.visible.active
[:div.ui.standard.test.modal.transition.visible.active.scrolling
[:div.header "Modal header"]
[:div.actions
[:div.ui.black.deny.button {:on-click close} "Cancel"]
[:div.ui.positive.right.labeled.icon.button {:on-click close} "Ok"
[:i.checkmark.icon]]]]])))
(defn mount-root []
(reagent/render [modal] (.getElementById js/document "modal"))
(reagent/render [current-page] (.getElementById js/document "app")))
It's still a bit messy to find all css classes, and I did not really
care about transitions, but that's doable without going into
component-did-mount.
Cédric
On 04/06/2016 02:33 PM, Torsten Uhlmann wrote:
Most of the time these problems come from something very simple.
Something that makes you bang your head against the table after you
found it. At least that's the case with me :)
Anyway, using bootstrap 4 was just an example. I decided not to go
with material-ui for several reasons. One was that material looks what
it looks. Don't get me wrong, I think it looks great. But it's not
made to be adaptable the way bootstrap is. And at the time I started I
didn't know what I would prefer. Also, in other projects we're using
bootstrap 3 so I wanted to see how that is going and it was something
familiar :)
I had some trouble with Material-UI at the time I tested it. I could
not get my hands at some properties that I needed to set in order to
work well with Reagent. There's a thread about this in the Reagent list.
Bootstrap is mostly CSS, and while I started with the Javascript they
have for dropdowns etc. I'm now replacing that with pure Reagent
versions. That makes the code pretty lean and for a good learning
experience. From that perspective a mostly CSS framework is easier to
incorporate into Reagent than a ReactJS framework that you have to
wrap around. At least that was my experience.
Torsten.
Fernando Abrao <[email protected] <mailto:[email protected]>> schrieb
am Mi., 6. Apr. 2016 um 14:10 Uhr:
Em quarta-feira, 6 de abril de 2016 04:40:22 UTC-3, Torsten
Uhlmann escreveu:
> I'm afraid I don't have a straight forward answer to your question.
>
> When I ran into this React error it usually meant I forgot
something in my markup that the browser thought it should fix- the
browser changed the DOM and React didn't know about.
>
> Try looking at the rendered dom in the browser and see if it is
different from what you specified in the component. Something like
a wrong nesting of elements or some element the browser added by
itself, etc.
>
> I did a few Material-UI experiements
(https://github.com/tuhlmann/reagent-material) a while ago, maybe
something int the repo can help. In the end I decided to go with
Bootstrap 4...
>
> Hope that helps,
> Torsten.
Now I´m confused :) . Something that will be simple, is not so.
So Bootstrap 4 with Reagent do you think it´s easy than what I´m
doing?
--
Note that posts from new members are moderated - please be patient
with your first post.
---
You received this message because you are subscribed to the Google
Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [email protected]
<mailto:clojurescript%[email protected]>.
To post to this group, send email to
[email protected]
<mailto:[email protected]>.
Visit this group at https://groups.google.com/group/clojurescript.
--
Note that posts from new members are moderated - please be patient
with your first post.
---
You received this message because you are subscribed to the Google
Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to [email protected]
<mailto:[email protected]>.
To post to this group, send email to [email protected]
<mailto:[email protected]>.
Visit this group at https://groups.google.com/group/clojurescript.
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/clojurescript.
