Comme la plupart d'entre nous le savent probablement, Bootstrap et Foundation sont les leaders actuels parmi les cadres de développement frontal. Mais l'histoire nous a montré que finalement quelque chose de mieux se produira et dans ce cas, cela pourrait ne pas être si loin.
Cet article vous présentera un nouveau candidat sur le paysage du cadre appelé sémantique UI.
L'UI sémantique est un cadre de développement frontal moderne, propulsé par moins et jQuery. Il a un look de conception élégant, subtil et plat qui offre une expérience utilisateur légère.
Selon le site Web de l'interface utilisateur sémantique, l'objectif du cadre est de permettre aux concepteurs et aux développeurs «en créant un langage pour le partage de l'interface utilisateur». Ils le font en tirant parti d'un langage sémantique et descriptif pour ses classes et en nommant les conventions. Au lieu d'utiliser des abréviations, comme le font les autres cadres, il utilise de vrais mots d'une manière plus proche de l'anglais simple.
L'interface utilisateur sémantique est unique de deux manières. La première est la façon dont le cadre est structuré. Il utilise cinq catégories descriptives pour définir des composants d'interface utilisateur réutilisables.
Comme vous pouvez le voir, l'interface utilisateur sémantique est non seulement significative et bien structurée en termes de nommage de ses classes, mais aussi de nommer, de définir et de décrire ses composants. Cette structure est beaucoup plus sémantique par rapport à celle trouvée dans Bootstrap ou Foundation.
La deuxième chose unique à propos de l'interface utilisateur sémantique est qu'il fournit des fonctionnalités et des composants exclusifs non présents dans d'autres cadres. Par exemple, alimenter et commenter les composants de vues d'interface utilisateur ou la barre latérale et la forme des modules d'interface utilisateur. De plus, lorsque vous interagissez avec les composants de l'interface utilisateur sémantique, vous obtenez une sortie de débogage en temps réel. Ouvrez simplement votre console Web et vous verrez vos composants communiquer exactement ce qu'ils font.
Une autre force de l'interface utilisateur sémantique est qu'elle utilise un style minimal et neutre, laissant la personnalisation ouverte. Il comprend des choses importantes et utiles tout en laissant de côté des fonctionnalités supplémentaires que vous n'utiliserez probablement jamais. De plus, les composants du cadre sont portables et autonomes afin que vous puissiez saisir et utiliser uniquement ceux dont vous avez besoin.
Le cadre utilise des unités EM et REM pour ses éléments, ce qui le rend pleinement réactif et adaptatif à toute taille. Vous n'avez qu'à modifier la police de base et tous les autres éléments s'ajusteront en conséquence.
Enfin, l'interface utilisateur sémantique est très bien documentée et le site Web fournit de nombreux exemples pour les différents composants. De plus, il a un guide de style avec des techniques et des instructions sur la façon d'écrire votre code. Tout cela fait de l'apprentissage du cadre une expérience sans douleur.
pour trouver comment l'interface utilisateur sémantique s'intègre à d'autres projets et outils, consultez la page d'intégration.
Pour voir à quel point un site Web construit avec l'interface utilisateur sémantique est en train de visiter original.
ok. Jusqu'ici, tout va bien. Mais je pense que cet aperçu de l'interface utilisateur sémantique ne sera pas complètement complet sans nous salir les mains. Alors goûtez à la douceur de l'interface utilisateur sémantique en ce moment. Je vais vous montrer comment créer un formulaire de signe / inscription impressionnant en utilisant une variété de composants d'interface utilisateur sémantiques.
Nous allons créer un formulaire qui change les vues selon que l'utilisateur souhaite «se connecter» ou «s'inscrire». Voici à quoi ressembleront les vues:
Téléchargez d'abord l'interface utilisateur sémantique, ouvrez le fichier zippé et extraire le dossier appelé «Packaged». Renommer l'exemple de formulaire d'interface utilisateur sémantique (ou quelque chose d'autre que vous pouvez utiliser pour l'identifier facilement).
Pour voir une démo de travail de notre exemple de formulaire, téléchargez simplement le fichier complet.html et mettez-le dans le dossier d'exemple de formulaire d'interface utilisateur sémantique. Ouvrez le fichier Form.html dans votre navigateur et jouez avec le formulaire pour en avoir le sens. Maintenant, je vais vous montrer comment recréer le formulaire en affichant et en expliquant le code impliqué.
Pour démarrer, renommez le fichier vers complet_form.html et créez un fichier vide appelé form.html. Ouvrez-le et ajoutez le HTML suivant:
<span><span><!DOCTYPE HTML></span> </span><span><span><span><html</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span> /></span> </span> <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span> </span> <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span> </span> <span><span><span><style</span> type<span>="text/css"</span>></span><span> </span></span><span><span> </span></span><span><span> </span><span><span></style</span>></span> </span> <span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><!-- content will go here --> </span> <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span>></span><span> </span></span><span><span> </span></span><span><span> </span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
C'est notre modèle de départ. Il est lié aux fichiers sémantique.css et sémantique.js et ajoute une référence à la bibliothèque jQuery. Il a également des balises de script et de style pour le JavaScript et CSS que nous allons ajouter. J'inclus le JavaScript et le CSS en interne uniquement à des fins d'apprentissage, car c'est plus facile et vous n'avez pas besoin de sauter entre plusieurs fichiers. Mais dans les projets du monde réel, il est toujours préférable d'utiliser des fichiers externes.
Avant de commencer, considérons le fonctionnement de l'interface utilisateur sémantique. Toutes les définitions des composants commencent par une classe d'interface utilisateur suivie du nom du composant. Par exemple, pour ajouter un élément de bouton, vous lui donnez simplement une classe de bouton d'interface utilisateur. Pour ajouter des états et / ou des variations, insérez simplement les classes nécessaires. Par exemple, pour créer un bouton qui modifie sa couleur en bleu sur le plan de survol, ajoutez la classe d'état de survol et la classe de variation bleue: bouton bleu de survol de l'interface utilisateur.
Revenons à notre formulaire. Je ne vais pas expliquer ce que fait chaque classe, car les classes sont plus ou moins auto-descriptives et vous pouvez en voir plus sur leurs significations dans la documentation.
La première chose que nous devons faire est d'ajouter un élément de segment qui contiendra notre formulaire. Nous le faisons en ajoutant une balise Div avec une classe de Signine du segment surélevé de l'interface utilisateur. Pour le titre du formulaire, nous utilisons une balise H3 avec une classe d'en-tête de bloc bleu inversé inversé. Ensuite, nous créons une grille à deux colonnes avec un diviseur vertical entre les colonnes. Dans la première colonne, nous ajoutons un div avec une classe de segment empilé bleu d'interface utilisateur, qui maintiendra nos éléments de forme. En bas, nous mettons un autre élément de diviseur et une div avec une classe de pied de page.
<span><span><!DOCTYPE HTML></span> </span><span><span><span><html</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span> /></span> </span> <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span> </span> <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span> </span> <span><span><span><style</span> type<span>="text/css"</span>></span><span> </span></span><span><span> </span></span><span><span> </span><span><span></style</span>></span> </span> <span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><!-- content will go here --> </span> <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span>></span><span> </span></span><span><span> </span></span><span><span> </span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
Maintenant, nous devons ajouter du style. Mettez le code ci-dessous à l'intérieur de vos balises de style actuellement vides.
<span><span><span><div</span> class<span>="ui raised segment signin"</span>></span> </span> <span><span><span><h3</span> class<span>="ui inverted blue block header"</span>></span> SIGN IN <span><span></h3</span>></span> </span> <span><span><span><div</span> class<span>="ui two column grid basic segment"</span>></span> </span> <span><span><span><div</span> class<span>="column"</span>></span> </span> <span><span><span><div</span> class<span>="ui blue stacked segment"</span>></span> </span> <span><!-- form here --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui vertical divider"</span>></span> OR <span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="center aligned column"</span>></span> </span> <span><!-- Facebook button here --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui divider"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="footer"</span>></span> </span> <span><!-- text plus button here --> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Ensuite, dans la première colonne (où le commentaire HTML dit «formulaire ici»), nous ajoutons le code du formulaire. Pour créer la forme, nous ajoutons une balise div avec une classe de forme d'interface utilisateur. Ensuite, nous avons mis deux autres balises div chacune avec une classe de champ, une autre avec une classe de champ en ligne, et enfin une avec une classe de bouton de soumission rouge d'interface utilisateur. Les deux premiers champs sont destinés à nom d'utilisateur et Mot de passe . Dans le troisième div, qui est formaté pour être en ligne, nous mettons une case à cocher.
<span>body<span>, .ui.vertical.divider</span> {
</span> <span>color: #696969;
</span><span>}
</span>
<span><span>.ui.vertical.divider</span> {
</span> <span>margin: 0 4px;
</span><span>}
</span>
<span><span>.ui.raised.segment</span> {
</span> <span>background-color: #fffacd;
</span> <span>width: 600px;
</span> <span>margin-top: 0;
</span> <span>position: fixed;
</span> <span>left: 10px;
</span> <span>top: 10px;
</span><span>}</span>Dans la deuxième colonne avec une colonne alignée sur le centre de classe (où le commentaire HTML indique "Bouton Facebook ici"), nous utilisons une rubrique H4 et Ajouter le bouton social Facebook de l'interface utilisateur sémantique:
<span><span><span><div</span> class<span>="ui form"</span>></span> </span> <span><span><span><div</span> class<span>="field"</span>></span> </span> <span><span><span><label</span>></span> Username <span><span></label</span>></span> </span> <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span> </span> <span><span><span><input</span> type<span>="text"</span>></span> </span> <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="field"</span>></span> </span> <span><span><span><label</span>></span> Password <span><span></label</span>></span> </span> <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span> </span> <span><span><span><input</span> type<span>="password"</span>></span> </span> <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="inline field"</span>></span> </span> <span><span><span><div</span> class<span>="ui checkbox"</span>></span> </span> <span><span><span><input</span> id<span>="remember"</span> type<span>="checkbox"</span>></span> </span> <span><span><span><label</span> for<span>="remember"</span>></span> Remember me <span><span></label</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign In <span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Nous terminons le pied de page en ajoutant du texte et un bouton animé qui passera notre formulaire de connexion pour s'inscrire. Le HTML suivant est ajouté où le commentaire HTML indique «Bouton Text Plus ici»:
<span><span><span><h4</span> class<span>="ui header"</span>></span> Sign in with: <span><span></h4</span>></span> </span><span><span><span><div</span> class<span>="ui facebook button"</span>></span> </span> <span><span><span><i</span> class<span>="facebook icon"</span>></span><span><span></i</span>></span> </span> Facebook <span><span><span></div</span>></span></span>
Nous devrons également ajouter un style pour rendre notre pied de page correctement. Ajoutez le CSS suivant sous le CSS existant à l'intérieur de nos balises de style:
<span><span><span><div</span> class<span>="text"</span>></span> Not a member? <span><span></div</span>></span> </span><span><span><span><div</span> class<span>="ui vertical animated blue mini button signup"</span>></span> </span> <span><span><span><div</span> class<span>="visible content"</span>></span> Join Us <span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="hidden content"</span>></span> </span> <span><span><span><i</span> class<span>="users icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Maintenant, le premier côté («inscription») est prêt. Créons la seconde. Nous commençons par le code suivant qui est similaire à celui que nous avons déjà couvert. Ce HTML est ajouté ci-dessous tous nos HTML:
existants<span><span>.footer</span> {
</span> <span>text-align: right;
</span><span>}
</span>
<span><span>.text</span> {
</span> <span>display: inline;
</span><span>}</span>Ensuite, nous ajoutons le code du formulaire à l'intérieur de l'élément segment, dans le HTML que nous venons d'ajouter (où le commentaire HTML dit «Formul ici»). Le message d'erreur de l'interface utilisateur Div avec classe est mis à la fin du formulaire car le comportement de validation du formulaire que nous ajouterons plus tard nécessite qu'il affiche des erreurs à l'utilisateur.
<span><span><span><div</span> class<span>="ui raised segment signup inactive"</span>></span> </span> <span><span><span><h3</span> class<span>="ui inverted blue block header"</span>></span> SIGN UP <span><span></h3</span>></span> </span> <span><span><span><div</span> class<span>="ui blue stacked segment"</span>></span> </span> <span><!-- form here --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui divider"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="footer"</span>></span> </span> <span><span><span><div</span> class<span>="text"</span>></span> Already a member? <span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui vertical animated blue mini button signin"</span>></span> </span> <span><span><span><div</span> class<span>="visible content"</span>></span> Log In <span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="hidden content"</span>></span> </span> <span><span><span><i</span> class<span>="sign in icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Remarquez que chacun des éléments de champ dans le HTML ci-dessus a un commentaire indiquant quelle partie du formulaire que nous ajouterons dans chacun. Faisons cela maintenant.
Voici le code du champ Nom d'utilisateur Field:
<span><span><span><div</span> class<span>="ui form"</span>></span> </span> <span><span><span><div</span> class<span>="two fields"</span>></span> </span> <span><span><span><div</span> class<span>="field"</span>></span> </span> <span><!-- Username here --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="field"</span>></span> </span> <span><!-- Email here --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="two fields"</span>></span> </span> <span><span><span><div</span> class<span>="field"</span>></span> </span> <span><!-- Password here --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="field"</span>></span> </span> <span><!-- Confirm Password here --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="inline field"</span>></span> </span> <span><!-- checkbox here --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign Up <span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="ui error message"</span>></span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Voici le code du champ Email Field:
<span><span><span><label</span>></span> Username <span><span></label</span>></span> </span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span> </span> <span><span><span><input</span> id<span>="username"</span> placeholder<span>="e.g., Tarzan"</span> type<span>="text"</span>></span> </span> <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span> </span> <span><span><span><div</span> class<span>="ui corner label"</span>></span> </span> <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Voici le code du champ de mot de passe :
<span><span><span><label</span>></span> Email <span><span></label</span>></span> </span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span> </span> <span><span><span><input</span> id<span>="email"</span> placeholder<span>="e.g., tarzan@jungle.org"</span> type<span>="text"</span>></span> </span> <span><span><span><i</span> class<span>="mail icon"</span>></span><span><span></i</span>></span> </span> <span><span><span><div</span> class<span>="ui corner label"</span>></span> </span> <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Voici le code du champ de mot de passe confirmer Field:
<span><span><span><label</span>></span> Password <span><span></label</span>></span> </span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span> </span> <span><span><span><input</span> id<span>="password"</span> placeholder<span>="e.g., !@#$%^&*()_+:)"</span> type<span>="password"</span>></span> </span> <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span> </span> <span><span><span><div</span> class<span>="ui corner label"</span>></span> </span> <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
et le code de la case à cocher:
<span><span><span><label</span>></span> Confirm Password <span><span></label</span>></span> </span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span> </span> <span><span><span><input</span> id<span>="confirm-password"</span> placeholder<span>="e.g., !@#$%^&*()_+:)"</span> type<span>="password"</span>></span> </span> <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span> </span> <span><span><span><div</span> class<span>="ui corner label"</span>></span> </span> <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Nous ajoutons également du style pour les liens:
<span><span><span><div</span> class<span>="ui checkbox"</span>></span> </span> <span><span><span><input</span> id<span>="terms"</span> type<span>="checkbox"</span>></span> </span> <span><span><span><label</span> for<span>="terms"</span>></span> I agree to the <span><span><a</span> href<span>="#"</span>></span> Terms and Conditions <span><span></a</span>></span><span><span></label</span>></span> </span><span><span><span></div</span>></span></span>
Maintenant que les deux parties de notre formulaire sont prêtes, nous devons ajouter le code pour changer d'un côté du formulaire à l'autre. Mettez le code suivant dans la balise de script vide.
<span>a {
</span> <span>text-decoration: none;
</span> <span>color: #1E90FF;
</span><span>}</span>Notre formulaire a l'air sympa - mais que se passe-t-il si un utilisateur tape des valeurs non valides? Nous devons ajouter la validation. Nous le faisons en ajoutant le code suivant dans notre balise de script, après le code que nous venons d'ajouter ci-dessus:
<span>$( document ).ready(function() {
</span>
<span>// Hide Sign Up side on initialization
</span> <span>$( '.inactive' ).hide();
</span>
<span>$( '.mini.button.signup' ).click(function() {
</span>
<span>// Hide Sign In and show Sign Up side with slide down effect
</span> <span>$( '.ui.segment.signin' )
</span> <span>.hide()
</span> <span>.end()
</span> <span>.find( '.ui.segment.signup' )
</span> <span>.slideDown();
</span>
<span>});
</span>
<span>$( '.mini.button.signin' ).click(function() {
</span>
<span>// Hide Sign Up and show Sign In side with slide down effect
</span> <span>$( '.ui.segment.signup' )
</span> <span>.hide()
</span> <span>.end()
</span> <span>.find( '.ui.segment.signin' )
</span> <span>.slideDown();
</span>
<span>});
</span><span>});</span>Vous pouvez en savoir plus sur le fonctionnement du code ci-dessus dans la documentation.
Bravo! Ceci est un exemple assez simple et avec lui, nous n'avons fait que gratter la surface des capacités de l'interface utilisateur sémantique.
Comme vous pouvez le voir, l'interface utilisateur sémantique est une nouvelle, à certains aspects, un ajout unique au paysage des cadres de développement frontal. D'après ce que nous avons considéré ici, bien que ce soit, à ce jour, seulement quelques mois, vous pouvez voir qu'il est assez prometteur et mérite d'être sur des listes de surveillance de nombreux développeurs pour cette année.
Encore une fois, vous pouvez télécharger le fichier de didacticiel complet ici et n'oubliez pas de l'ajouter dans le dossier "Packaged" lorsque vous décompressez la bibliothèque d'interface utilisateur complète complète.
L'UI sémantique se démarque d'autres bibliothèques d'interface utilisateur en raison de son HTML respectueux de l'homme. Il permet un développement plus rapide et plus intuitif. Les classes de l'interface utilisateur sémantique utilisent la syntaxe à partir de langues naturelles comme les relations noms / modificateurs, l'ordre des mots et la pluralité pour relier les concepts intuitivement. Cela rend le code plus lisible et plus facile à comprendre, même pour les débutants.
Pour commencer avec l'interface utilisateur sémantique, vous devez d'abord l'installer. Vous pouvez le faire en utilisant la commande NPM: NPM Installer SEMANTIM-UI. Après l'installation, vous pouvez importer l'interface utilisateur sémantique et JavaScript dans votre projet. Ensuite, vous pouvez commencer à utiliser les composants d'interface utilisateur sémantique dans votre HTML.
Oui, l'interface utilisateur sémantique peut être utilisée avec React. Il y a une bibliothèque spécifique appelée REACT SEMANTIC UI qui est l'intégration officielle de réaction pour l'interface utilisateur sémantique. Il vous permet d'utiliser des composants et des thèmes d'interface utilisateur sémantique directement dans votre application React.
L'interface utilisateur sémantique vous permet de personnaliser les thèmes en modifiant le thème.Config déposer. Ce fichier agit comme un paramètre central pour toutes les variables de votre thème. Vous pouvez modifier les valeurs des variables pour personnaliser l'apparence de votre thème.
L'UI sémantique offre une large gamme de composants. Certains des plus communs comprennent des boutons, des icônes, des en-têtes, des séparateurs, des étiquettes, des listes et des cartes. Chaque composant est livré avec son propre ensemble de variations et d'options de personnalisation.
L'interface utilisateur sémantique prend en charge la conception réactive via son système de grille. Le système de grille vous permet de spécifier différentes largeurs de colonne pour différentes tailles d'écran, garantissant que votre conception a l'air bien sur tous les appareils.
Vous pouvez contribuer à l'interface utilisateur sémantique En soumettant des demandes de traction sur son référentiel GitHub. Avant de soumettre une demande de traction, assurez-vous de lire les directives contributives fournies par l'équipe d'interface utilisateur sémantique.
Bien qu'il n'y ait pas d'intégration angulaire officielle pour l'interface utilisateur sémantique, vous pouvez toujours l'utiliser avec Angular en incluant manuellement l'interface utilisateur sémantique CSS et les fichiers JavaScript dans votre projet.
Vous pouvez mettre à jour l'interface utilisateur sémantique en exécutant la commande SEMANTI-UI NPM Update. Cela mettra à jour l'interface utilisateur sémantique vers la dernière version.
Certaines alternatives à l'interface utilisateur sémantique incluent Bootstrap, Foundation, Material-UI et Bulma. Chacune de ces bibliothèques a ses propres forces et faiblesses, donc le meilleur choix dépend de vos besoins et préférences spécifiques.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Solution au problème selon lequel les fichiers exe ne peuvent pas être ouverts dans le système win10
Comment intégrer l'idée avec Tomcat
js arrondi
Solution aux caractères tronqués lors de l'ouverture d'Excel
Comment acheter, vendre et échanger du Bitcoin
Une mémoire capable d'échanger des informations directement avec le CPU est une
Comment définir le retour à la ligne automatique dans Word
Introduction aux touches de raccourci de capture d'écran dans Win8
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
