Ce este interfața semantică?

UI semantică este un cadru de dezvoltare front-end similar cu bootstrap-ul conceput pentru tematizare. Acesta conține componente semantice pre-construite, care ajută la crearea unor machete frumoase și receptive folosind HTML compatibil cu oamenii.

Conform site-ului web Semantic UI, cadrul utilizează HTML concis, JavaScript intuitiv și depanare simplificată pentru a face din dezvoltarea front-end o experiență distractivă și plăcută.

Și se integrează cu React, Angular, Meteor, Ember și multe alte cadre pentru a ajuta la organizarea stratului UI alături de logica aplicației.

Istoricul versiunilor UI semantice

Prima pre-lansare apare pe github în septembrie 2013, creată de Jack Lukic.

UI semantică 1.x a fost lansat pentru prima oară în noiembrie 2014, cu modificări recente față de versiunile anterioare.

UI semantic 2.x a fost lansat pentru prima dată în iunie 2015 și a introdus o nouă interfață, mai multe remedieri de erori, îmbunătățiri și îmbunătățiri implicite ale temelor.

Suport semantic UI Browser

Versiunea actuală 2.2.x acceptă următoarele browsere

  • Ultimele 2 versiuni FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome pentru Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

Cum se instalează Semantic UI

Există mai multe moduri de instalare a UI semantice, unele dintre cele mai simple moduri sunt următoarele:

Prin rețeaua de livrare de conținut (CDN)

Este de departe cel mai ușor pentru începători. Creați un fișier HTML după cum urmează

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
    <!-- Add custom stylesheet here -->
  </head>
  <body>
  
    <!-- Write your html code here -->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
  </body>
</html>

NOTE: Link-ul CDN de mai sus, pe linia 5, va include toate componentele disponibile în UI Semantic. Dacă doriți să instalați o anumită componentă, Click aici pentru a vedea linkul respectiv CDN.

Utilizarea instrumentelor de construire

Aceasta va presupune că utilizați sistemul de operare Ubuntu Linux cu node și npm instalat, pentru alte sisteme de operare Click aici

În directorul de proiect, instalați gulp la nivel global utilizând npm

npm install -g gulp

Instalați UI semantică

npm install semantic-ui --save
cd semantic/
gulp build

Includeți în HTML

<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/semantic-ui-guide/semantic/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

Actualizați prin npm

npm update

Integrarea cu alte cadre

Puteți integra interfața semantică cu alte cadre de dezvoltare front-end precum React, Angular, Ember sau Meteor. Click aici pentru mai multe informații și instrucțiuni de integrare.

Mai multe informații despre UI Semantic:

Semantic UI are o documentație completă și foarte bine organizată, care vă va pune în funcțiune în cel mai scurt timp. Următoarele linkuri vă vor fi utile în călătoria dvs. UI semantică.