Wie die meisten von uns wahrscheinlich bewusst sind, sind Bootstrap und Foundation die aktuellen Führungskr?fte unter Front-End-Entwicklungsrahmen. Aber die Geschichte hat uns gezeigt, dass irgendwann etwas Besseres mit sich kommen wird und in diesem Fall das m?glicherweise nicht so weit weg ist.

Dieser Artikel wird Ihnen einen neuen Kandidaten in der Rahmenlandschaft namens Semantic UI vorstellen.

semantische UI ist ein modernes Front-End-Entwicklungsrahmen, das von weniger und jQuery angetrieben wird. Es hat einen eleganten, subtilen und flachen Design -Look, der ein leichtes Benutzererlebnis bietet.

Laut der semantischen UI -Website ist es das Ziel des Rahmens, Designer und Entwicklern zu st?rken, ?indem sie eine Sprache für das Teilen von Benutzeroberfl?chen erstellen“. Sie tun dies, indem sie eine semantische, beschreibende Sprache für ihre Klassen und die Benennung von Konventionen nutzen. Anstatt Abkürzungen zu verwenden, verwendet es wie andere Frameworks reale W?rter auf eine Weise, die n?her an einfachem Englisch n?hert.

Key Takeaways

• semantische UI ist ein modernes Front-End-Entwicklungsrahmen, das menschlich-freundliche HTML betont, wobei die natürliche Sprache für Klassennamen verwendet wird, die die Lesbarkeit und Benutzerfreundlichkeit im Vergleich zu anderen Rahmenbedingungen wie Bootstrap und Foundation verbessert.
• Das Framework ist in fünf beschreibenden Kategorien strukturiert: UI -Elemente, UI -Sammlungen, UI -Ansichten, UI -Module und UI -Verhaltensweisen, die dazu beitragen, verschiedene und interaktive Web -Schnittstellen aufzubauen.
Semantische UI bietet einzigartige Funktionen und Komponenten, die in anderen Frameworks nicht verfügbar sind, z.
• Es unterstützt eine umfangreiche Anpassung mit minimalem und neutralem Standardstyling, wodurch es für verschiedene Entwurfspr?ferenzen anpassbar ist und sicherstellt
semantische UI ist gut dokumentiert und beinhaltet einen Stilhandbuch, der es für Anf?nger zug?nglich macht und für erfahrene Entwickler effizient ist, effektiv zu lernen und zu implementieren.
• Features

semantische UI ist auf zwei Arten einzigartig. Erstens ist die Art und Weise, wie das Framework strukturiert ist. Es verwendet fünf beschreibende Kategorien, um wiederverwendbare UI-Komponenten zu definieren.

• Ein UI -Element ist ein grundlegender Baustein. Es kann allein oder in einheitlichen Gruppen erscheinen. Beispielsweise kann eine Schaltfl?che unabh?ngig sein oder eine Knopfgruppe einfügen.
• Eine UI -Sammlung ist eine Gruppe verschiedener Arten von Elementen, die voneinander abh?ngig sind. Beispielsweise kann ein Webformular Schaltfl?chen, Eing?nge, Kontrollk?stchen, Symbole usw. haben.
• Eine UI -Ansicht stellt einen gemeinsamen Website -Inhalt dar. Zum Beispiel ein Feed- oder Kommentarabschnitt.
• Ein UI-Modul ist eine Komponente mit interaktiver JavaScript-basierter Funktionalit?t. Beispiele sind ein Akkordeon, ein Dimmer, ein Modal usw.
• Ein UI -Verhalten ist eine Komponente, die nicht unabh?ngig existieren kann, sondern verwendet, um Funktionen in andere Komponenten zu injizieren. Zum Beispiel liefert das Formular Validierungsverhalten Validierungsfunktionalit?t für die Formularkomponente.

Fast jede Komponente hat Typen, Zust?nde und Variationen. Einige der Typen der Schaltfl?chenkomponenten umfassen beispielsweise: Standard -Taste, Schaltfl?che mit Symbol, animierter Schaltfl?che und eine Schaltfl?che k?nnen im aktiven, deaktivierten oder ladenstatuellen Status enthalten sein. Schlie?lich kann eine Schaltfl?che in Gr??e und Farbe variieren und als Basis, sozial, flüssig, umschalten und mehr formatiert werden. Dieses Schema gibt Ihnen eine gro?e Flexibilit?t im Erscheinungsbild einer Komponente.

Wie Sie sehen, ist die semantische Benutzeroberfl?che nicht nur sinnvoll und gut strukturiert, um ihre Klassen zu benennen, sondern auch bei der Benennung, Definition und Beschreibung seiner Komponenten. Diese Struktur ist viel semantischer als in Bootstrap oder Foundation.

Die zweite einzigartige Sache an der semantischen Benutzeroberfl?che ist, dass es einige exklusive Funktionen und Komponenten bietet, die in anderen Frameworks nicht vorhanden sind. Zum Beispiel füttern und kommentieren Sie die UI -Komponenten oder die Seitenleiste und Form aus den UI -Modulen. Auch wenn Sie mit semantischen UI-Komponenten interagieren, erhalten Sie eine Echtzeit-Debug-Ausgabe. ?ffnen Sie einfach Ihre Webkonsole und Sie werden sehen, dass Ihre Komponenten genau das mitteilen, was sie tun.

Eine weitere St?rke der semantischen Benutzeroberfl?che besteht darin, dass sie ein minimales und neutrales Styling verwendet, sodass Sie die Anpassung offen lassen. Es enth?lt wichtige und nützliche Dinge, w?hrend Sie zus?tzliche Funktionen auslassen, die Sie wahrscheinlich nie verwenden werden. Au?erdem sind die Komponenten des Frameworks tragbar und in sich geschlossen, sodass Sie nur diejenigen greifen und verwenden k?nnen, die Sie ben?tigen.

Das Framework verwendet EM- und REM -Einheiten für seine Elemente, wodurch es vollst?ndig reaktionsschnell und adaptiv für jede Gr??e reagiert. Sie müssen nur die Basisschrift ?ndern und alle anderen Elemente werden sich entsprechend anpassen.

Schlie?lich ist die semantische Benutzeroberfl?che sehr gut dokumentiert und die Website enth?lt viele Beispiele für die verschiedenen Komponenten. Darüber hinaus verfügt es über einen Stilhandbuch mit Techniken und Anweisungen zum Schreiben Ihres Codes. All dies macht das Lernen des Rahmens zu einer schmerzfreien Erfahrung.

Um herauszufinden, wie die semantische Benutzeroberfl?che in andere Projekte und Tools integriert ist, lesen Sie die Integrationsseite.

Um zu sehen, wie eine Website, die mit semantischer Benutzeroberfl?che erstellt wurde, k?nnen Sie Quirky besuchen.

ok. So weit, ist es gut. Aber ich denke, dieser überblick über die semantische Benutzeroberfl?che wird nicht vollst?ndig sein, ohne uns etwas schmutzig zu machen. Probieren wir jetzt die Sü?e der semantischen Benutzeroberfl?che. Ich zeige Ihnen, wie Sie mit einer Vielzahl von semantischen UI -Komponenten ein fantastisches Zeichen in/Anmeldungsform erstellen.

So erstellen Sie ein Zeichen in/Anmeldenformular mit semantischer UI

Wir erstellen ein Formular, das Ansichten wechselt, je nachdem, ob der Benutzer sich anmelden oder sich anmelden m?chte. So sehen die Aussichten aus:

Laden Sie die semantische Benutzeroberfl?che zuerst herunter, ?ffnen Sie die Rei?verschlussdatei und extrahieren Sie den Ordner "verpackt". Benennen Sie das Beispiel für semantische UI -Form (oder etwas anderes, mit dem Sie es leicht identifizieren k?nnen).

laden Sie einfach eine funktionierende Demo unseres Formular -Beispiels herunter und laden Sie sie einfach die vollst?ndige Form.html -Datei herunter und geben Sie sie in den Ordner Semantic UI Formular. ?ffnen Sie die Datei form.html in Ihrem Browser und spielen Sie mit dem Formular, um den Sinn davon zu erhalten. Jetzt werde ich Ihnen zeigen, wie Sie das Formular neu erstellen, indem Sie den beteiligten Code anzeigen und erkl?ren.

Um zu starten, benennen Sie die Datei in complet_form.html um und erstellen Sie eine leere Datei namens Form.html. ?ffnen Sie es und fügen Sie das folgende HTML hinzu:

<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>

Dies ist unsere Startvorlage. Es links zu den Dateien Semantic.css und Semantic.js und verweist auf die Jquery -Bibliothek. Es verfügt auch über Skript- und Stil -Tags für das JavaScript und CSS, das wir hinzufügen werden. Ich schlie?e das JavaScript und das CSS nur für Lernzwecke intern ein, da es einfacher ist und Sie nicht zwischen mehreren Dateien springen müssen. Aber in realen Projekten ist es immer besser, externe Dateien zu verwenden.

Bevor wir anfangen, überlegen wir, wie die semantische Benutzeroberfl?che funktioniert. Alle Komponentendefinitionen beginnen mit einer Klasse von UI, gefolgt vom Namen der Komponente. Um beispielsweise ein Schaltfl?chenelement hinzuzufügen, geben Sie ihm einfach eine Klasse von UI -Taste. Um Zust?nde und/oder Variationen hinzuzufügen, fügen Sie einfach die erforderlichen Klassen ein. Um beispielsweise eine Schaltfl?che zu erstellen, die die Farbe auf Blau an schwebem Umfang ?ndert

Kommen wir zu unserer Form zurück. Ich werde nicht erkl?ren, was jede Klasse tut, da die Klassen mehr oder weniger selbstbeschreibend sind und Sie mehr über ihre Bedeutungen in der Dokumentation sehen k?nnen.

Das erste, was wir tun müssen, ist ein Segmentelement hinzuzufügen, das unsere Form enth?lt. Wir tun dies, indem wir ein DIV -Tag mit einer Klasse von UI -erh?hten Segment -Signin hinzufügen. Für den Titel des Formulars verwenden wir ein H3 -Tag mit einer Klasse von invertierten blauen Blockheader von UI. Als n?chstes erstellen wir ein Zwei-Spaltn-Netz mit einem vertikalen Teiler zwischen den S?ulen. In der ersten Spalte fügen wir eine DIV mit einer Klasse von UI -blau gestapelten Segment hinzu, die unsere Formelemente enth?lt. Am Boden setzen wir ein weiteres Trennelement und eine Div mit einer Klasse von Fu?zeile.

<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>

Jetzt müssen wir etwas Styling hinzufügen. Geben Sie den Code unten in Ihre aktuell leeren Stil -Tags ein.

<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>

Als n?chstes fügen wir in der ersten Spalte (in dem der HTML -Kommentar ?Formular hier“ steht) den Code für das Formular hinzu. Um das Formular zu erstellen, fügen wir ein DIV -Tag mit einer Klasse von UI -Form hinzu. Dann setzen wir zwei weitere Div -Tags mit jeweils eine Feldklasse, eine andere mit einer Klasse von Inline -Feld und schlie?lich eine mit einer Klasse von UI Red -Subent -Taste. Die ersten beiden Felder sind für Benutzername und Passwort . Im dritten Div, das als Inline formatiert ist, setzen wir ein Kontrollk?stchen ein.

<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>

In der zweiten Spalte mit Klassenzentrum ausgerichtete Spalte (in dem der HTML -Kommentar "Facebook -Schaltfl?che hier" hei?t)

<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>

Wir vervollst?ndigen die Fu?zeile, indem wir einen Text und eine animierte Schaltfl?che hinzufügen, die unser Formular von Anmeldung zur Anmeldung umschaltet. Das folgende HTML wird hinzugefügt, bei dem der HTML -Kommentar ?Text plus Schaltfl?che hier“ hei?t:

<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>

Wir müssen auch ein gewisses Design hinzufügen, um unsere Fu?zeile richtig zu machen. Fügen Sie die folgenden CSS unter den vorhandenen CSS in unseren Stil -Tags hinzu:

<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>

Jetzt ist die erste Seite (?Anmeldung“) fertig. Lassen Sie uns die zweite erstellen. Wir beginnen mit dem folgenden Code, der dem ?hnelt, den wir bereits abgedeckt haben. Diese HTML wird unter all unseren vorhandenen HTML hinzugefügt:

<span><span>.footer</span> {
</span>  <span>text-align: right;
</span><span>}
</span>
<span><span>.text</span> {
</span>  <span>display: inline;
</span><span>}</span>

Als n?chstes fügen wir den Code für das Formular innerhalb des Segmentelements hinzu, in der HTML, die wir gerade hinzugefügt haben (wobei der HTML -Kommentar hier ?Formular“ hei?t). Die DIV -mit Klassen -UI -Fehlermeldung wird am Ende des Formulars festgelegt, da das Formular Validierungsverhalten, das wir sp?ter hinzufügen, Fehler für den Benutzer angezeigt werden müssen.

<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>

Beachten Sie, dass jedes der Feldelemente in der obigen HTML einen Kommentar hat, der angibt, welcher Teil des Formulars, das wir in jedem einzelnen hinzufügen werden. Lass uns das jetzt tun.

Hier ist der Code für das Feld

Benutzername :

<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>

Hier ist der Code für das Feld

E -Mail :

<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>

Hier ist der Code für das Feld

Passwort :

<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>

Hier ist der Code für das Feld

Best?tigen Sie das Kennwort :

<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., !@#$%^&amp;*()_+:)"</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>

und der Code für das Kontrollk?stchen:

<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., !@#$%^&amp;*()_+:)"</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>

Wir fügen auch Styling für die Links hinzu:

<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>

Jetzt, da die beiden Teile unseres Formulars fertig sind, müssen wir den Code zum Umschalten von einer Seite des Formulars zur anderen hinzufügen. Geben Sie den folgenden Code in das leere Skript -Tag ein.

<span>a {
</span>  <span>text-decoration: none;
</span>  <span>color: #1E90FF;
</span><span>}</span>

Unser Formular sieht gut aus - aber was ist, wenn ein Benutzer ungültige Werte tippt? Wir müssen die Validierung hinzufügen. Wir tun dies, indem wir den folgenden Code in unserem Skript -Tag hinzufügen, nachdem wir oben den Code oben hinzugefügt haben:

<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>

Sie k?nnen mehr darüber erfahren, wie der obige Code in der Dokumentation funktioniert.

Gut gemacht! Dies ist ein ziemlich einfaches Beispiel, und damit haben wir nur die Oberfl?che der F?higkeiten der semantischen UI zerkratzt.

Schlussfolgerung

Wie Sie sehen, ist die semantische UI eine neue, frische und in einigen Aspekten einzigartiger Erg?nzung zur Landschaft der Front-End-Entwicklungsrahmen. Nach dem, was wir hier in Betracht gezogen haben, k?nnen Sie nach diesem Schreiben nur ein paar Monate alt sind, sondern dass es ziemlich vielversprechend ist und es verdient, für dieses Jahr auf den Beobachtungslisten vieler Entwickler zu stehen.

Noch einmal k?nnen Sie die vollst?ndige Tutorial -Datei hier herunterladen und denken Sie daran, sie in den Ordner "verpackt" hinzuzufügen, wenn Sie die vollst?ndige semantische UI -Bibliothek entpacken.

h?ufig gestellte Fragen (FAQs) zur semantischen UI -Komponentenbibliothek

Was unterscheidet die semantische UI von anderen UI-Bibliotheken? Es erm?glicht eine schnellere und intuitivere Entwicklung. Die Klassen in der semantischen UI verwenden Syntax aus natürlichen Sprachen wie Substantiv-/Modifikator -Beziehungen, Wortreihenfolge und Pluralit?t, um Konzepte intuitiv zu verknüpfen. Dies macht den Code auch für Anf?nger lesbar und einfacher zu verstehen.

Wie kann ich mit semantischer UI? Sie k?nnen dies mit dem Befehl npm verwenden: npm install semantic-ui. Nach der Installation k?nnen Sie die semantischen Benutzeroberfl?che und JavaScript in Ihr Projekt importieren. Dann k?nnen Sie die semantischen UI -Komponenten in Ihrem HTML verwenden.

Kann ich semantische UI mit React verwenden? Es gibt eine bestimmte Bibliothek namens Semantic UI React, die die offizielle React -Integration für die semantische UI ist. Sie k?nnen semantische UI -Komponenten und -Themen direkt in Ihrer React -Anwendung verwenden.

Wie kann ich Themen in semantischer UI anpassen? Datei. Diese Datei fungiert als zentrale Einstellung für alle Variablen Ihres Themas. Sie k?nnen die Werte von Variablen ?ndern, um das Erscheinungsbild Ihres Themas anzupassen. Einige der g?ngigen umfassen Schaltfl?chen, Symbole, Header, Trenner, Beschriftungen, Listen und Karten. Jede Komponente verfügt über eigene Variationen und Anpassungsoptionen. Mit dem Gittersystem k?nnen Sie verschiedene Spaltenbreiten für verschiedene Bildschirmgr??en angeben und sicherstellen, dass Ihr Design auf allen Ger?ten gut aussieht. Durch Einreichen von Pull -Anfragen in seinem Github -Repository. Stellen Sie vor dem Einreichen einer Pull -Anfrage die vom semantischen UI -Team bereitgestellten Richtlinien vor.

Wie kann ich semantische Benutzeroberfl?che mit Angular verwenden?

Wie kann ich die semantische Benutzeroberfl?che aktualisieren? Dies wird die semantische Benutzeroberfl?che auf die neueste Version aktualisieren.

Was sind einige Alternativen zur semantischen UI? Jede dieser Bibliotheken hat seine eigenen St?rken und Schw?chen, daher h?ngt die beste Wahl von Ihren spezifischen Bedürfnissen und Vorlieben ab.

Das obige ist der detaillierte Inhalt vonEinführung: Semantische UI -Komponentenbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!