Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:css:frameworks:semantic [2023/04/16 20:23] – [Via npm] jcheron
+++ web:css:frameworks:semantic [2023/04/18 02:46] (Version actuelle) – [Eléments HTML simples] jcheron
@@ Ligne 6: / Ligne 6: @@
 **Semantic-UI** utilise **jQuery**.
+===== Documentation =====
+  * https://fomantic-ui.com/
 ===== Intégration =====
@@ Ligne 48: / Ligne 52: @@
 <script src="/dist/semantic.min.js"></script>
 </sxh>
+===== Bases =====
+==== Eléments HTML simples ====
+La plupart des composants Semantic ne requiert que du HTML
+**Segment :**
+<sxh html;gutter:false>
+<div class='ui segment'>
+</div>
+</sxh>
+**Bouton :**
+<sxh html;gutter:false>
+<a class='ui button'>
+    Ouvrir...
+</a>
+</sxh>
+==== Eléments HTML/JS ====
+Certains composants nécessitent une création en HTML, et une initialisation en JS :
+Exemple : Dropdown
+<sxh html;gutter:false>
+<div class="ui selection dropdown">
+  <input type="hidden" name="pet">
+  <i class="dropdown icon"></i>
+  <div class="default text">Pet</div>
+  <div class="scrollhint menu">
+    <div class="item" data-value="0">Cat</div>
+    <div class="item" data-value="1">Dog</div>
+    <div class="item" data-value="2">Bird</div>
+    <div class="item" data-value="3">Rabbit</div>
+    <div class="item" data-value="4">Squirrel</div>
+    <div class="item" data-value="5">Horse</div>
+    <div class="item" data-value="6">Turtle</div>
+    <div class="item" data-value="7">Parrot</div>
+  </div>
+</div>
+<script>
+$('.ui.dropdown').dropdown();
+</script>
+</sxh>
+==== Eléments JS ====
+Certains composants (beaucoup plus rares) sont 100% JS, c'est le cas par exemple du **toast** :
+<sxh javascript;gutter:false>
+$.toast({
+  title: 'Better ?',
+  message: 'Hey look, I have a title !'
+});
+</sxh>