semantic-uiIniziare con semantic-ui


Osservazioni

Questa sezione fornisce una panoramica di ciò che semantic-ui è, e perché uno sviluppatore potrebbe voler usarlo.

Dovrebbe anche menzionare qualsiasi argomento di grandi dimensioni all'interno di semantic-ui e collegarsi agli argomenti correlati. Poiché la documentazione di semantic-ui è nuova, potrebbe essere necessario creare versioni iniziali di tali argomenti correlati.

Versioni

Versione Data di rilascio
[2.2.10] 2017/03/28
[2.2.9] 2017/02/21
[2.2.8] 2017/02/21
[2.2.7] 2016/12/21
[2.2.6] 2016/10/27
[2.2.5] 2016/10/27
[2.2.4] 2016/08/25
[2.2.3] 2016/08/21
[2.2.2] 2016/07/07
[2.2.1] 2016/06/27
[2.2.0] 2016/07/26
[2.1] 2015/09/02
[1.12] 2015/04/13
[1.0] 2014/11/24
[0,1] 2013/09/25

Installazione via NodeJS - Consigliata

L'installazione tramite NodeJS è il metodo consigliato. È preferibile perché puoi usarlo per costruire i file selezionando solo i componenti che desideri.

Passaggio 1 : Installa nodo ( collegamento )

Passaggio 2 : installa Gulp globalmente (-g) sul tuo computer

npm install -g gulp
 

L'interfaccia utente semantica utilizza Gulp per fornire strumenti a riga di comando per la creazione di versioni tematiche della libreria con solo i componenti necessari.

Passo 3 : Installa Semantic-UI localmente per il tuo progetto

cd /path/to/your/project

npm install semantic-ui --save
 

Passaggio 4 : Passare alla cartella in cui è stato salvato semantic-ui ed eseguire la seguente attività di gulp (operazione che potrebbe essere eseguita automaticamente)

cd node_modules/semantic-ui    
gulp install
 

Questo avvierà l'installer interattivo. Basta seguire le istruzioni per selezionare gli elementi SUI che vuoi e costruirà i file pertinenti per te.

  • Dovrai prima scegliere il tipo di installazione. Gli utenti in prima istanza possono scegliere la modalità automatica per costruire SUI
  • Quindi dovrai specificare la cartella del progetto e dove vorresti salvare SUI (l'impostazione predefinita è semantic/ )
  • In caso di installazione personalizzata, avrai la possibilità di scegliere i componenti che desideri.

Passaggio 5 : collegamento al codice HTML

Collega il file CSS e JavaScript compilato nel tuo codice HTML

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
 

Tutto fatto!