Ръководство за семантичен потребителски интерфейс

Програмиране

Какво е семантичен потребителски интерфейс?

Semantic UI е интерфейс за разработка отпред, подобен на bootstrap, предназначен за тематизиране. Той съдържа предварително изградени семантични компоненти, които помагат да се създадат красиви и отзивчиви оформления, използващи удобен за човека HTML.

Според уебсайта на семантичния потребителски интерфейс рамката използва кратък HTML, интуитивен JavaScript и опростено отстраняване на грешки, за да направи разработката отпред забавно и възхитително преживяване.

И се интегрира с React, Angular, Meteor, Ember и много други рамки, за да помогне за организирането на потребителския слой заедно с логиката на приложението.

История на версиите на семантичния потребителски интерфейс

Първата предварителна версия се появява на github на септември 2013 г., създадена от Джак Лукич.

Семантичният потребителски интерфейс 1.xбеше пуснат за първи път през ноември 2014 г. с промени в предишни версии.

Семантичният потребителски интерфейс 2.xбеше пуснат за първи път през юни 2015 г. и представи нов потребителски интерфейс, няколко корекции на грешки, подобрения и подобрения по подразбиране.

Поддръжка на семантичен потребителски интерфейс

Текущата версия 2.2.xподдържа следните браузъри

  • Последни 2 версии FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome за Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

Как да инсталирам семантичен потребителски интерфейс

Има няколко начина за инсталиране на семантичен потребителски интерфейс, някои от най-простите начини са следните:

Чрез мрежа за доставка на съдържание (CDN)

Това е най-лесното за начинаещи. Създайте HTML файл, както е показано по-долу

   Semantic UI

NOTE:Горната CDN връзка на ред 5 ще включва всички налични компоненти в семантичния потребителски интерфейс. Ако искате да инсталирате конкретен компонент, щракнете тук, за да видите съответната му CDN връзка.

Използване на инструменти за изграждане

Това ще приеме, че използвате Ubuntu Linux OS с nodeи npmинсталиран, за други операционни системи кликнете тук

В директорията на вашия проект инсталирайте gulp глобално, като използвате npm

npm install -g gulp

Инсталирайте семантичен потребителски интерфейс

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

Включете в HTML

Актуализиране чрез npm

npm update

Интегриране с други рамки

Можете да интегрирате семантичния потребителски интерфейс с други фреймворк фреймворк програми като React, Angular, Ember или Meteor. Щракнете тук за повече информация и инструкции за интеграция.

Повече информация за семантичния потребителски интерфейс:

Semantic UI има задълбочена и много добре организирана документация, която ще ви подготви за нула време. Следните връзки ще бъдат полезни при вашето пътуване по семантичен потребителски интерфейс.

  • Уебсайт за семантичен потребителски интерфейс
  • Първи стъпки със семантичен потребителски интерфейс
  • Примерни семантични UI шаблони
  • Персонализиране и създаване на семантични потребителски теми