Comments (3)
Here is a minimal way to use modals with Semantic UI and reagent:
1. Create a repo
lein new reagent-figwheel mymodal
2. Add necessary dependencies to resources/public/index.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<script src="js/compiled/app.js"></script>
<script>mymodal.core.main();</script>
</body>
</html>
3. Update src/cljs/mymodal/core.cljs to look like this.
(ns mymodal.core
(:require
[reagent.core :as reagent]))
(def app-state
(reagent/atom {}))
;; This is the modal that will be displayed when you
;; trigger the appropriate javascript found here: http://semantic-ui.com/modules/modal.html
(defn modal []
[:div.ui.basic.modal
[:div.header "Modal"]
[:p "This is some content"]
])
(defn page [ratom]
[:div
[modal]
;; This button will fire the javascript to display the modal
[:button
{:on-click #(.modal (js/$ ".ui.basic.modal")
"show")}
"Show Modal"]
])
(defn reload []
(reagent/render [page app-state]
(.getElementById js/document "app")))
(defn ^:export main []
(reload))
4. Start the app
lein figwheel dev
Wait a bit, then navigate to localhost:3449
If you have further questions, please ping me (@gadfly361) in the #reagent channel of clojurians slack (http://clojurians.net/)
from soda-ash.
That's interesting that you've shown to add a dependency on jQuery when Semantic UI's first marketing pitch is that the library is jQuery-free: https://react.semantic-ui.com/introduction
Why is jQuery needed?
from soda-ash.
@astoeckley this issue is from before soda ash used semantic-ui's react components. Currently, there is no longer a dependency on jQuery.
from soda-ash.
Related Issues (10)
- Shape HOT 3
- How to do attributes with no value? HOT 2
- Using Tab and TabPane HOT 5
- how to use `as={Menu}` component class? HOT 2
- Controlled Input loses cursor position on value change. HOT 10
- quick documentation note HOT 1
- Name of the Menu Item HOT 2
- Update semantic react to 0.79.1 HOT 5
- How to pass a child component as a prop? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from soda-ash.