Différences

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

--- web:css:frameworks:semantic [2023/04/16 17:21] – [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 11: / Ligne 15: @@
 ==== Via CDN ====
+=== CSS ===
+<sxh html;gutter:false>
+<head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css">
+</head>
+</sxh>
+=== Javascript ===
+Avant la fermeture du body :
+<sxh html;gutter:false>
+<!-- You MUST include jQuery 3+ before Fomantic -->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"></script>
+</body>
+</sxh>
 ==== Via npm ====
 <wrap info>Ne pas oublier également l'intégration de jQuery.</wrap>
@@ Ligne 16: / Ligne 36: @@
 npm install fomantic-ui
 </sxh>
+=== CSS ===
+Dans le head
+<sxh html;gutter:false>
+<head>
+<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
+</head>
+</sxh>
+=== Javascript ===
+Avant la fermeture du body :
+<sxh html;gutter:false>
+<!-- You MUST include jQuery 3+ before Fomantic -->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
+<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>