Différences

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

--- web:css:frameworks:semantic [2023/04/18 02:40] – jcheron
+++ web:css:frameworks:semantic [2023/04/18 02:46] (Version actuelle) – [Eléments HTML simples] jcheron
@@ Ligne 57: / Ligne 57: @@
 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>