Einführung: Semantische UI -Komponentenbibliothek

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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><meta> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title>></title></span>Semantic UI Sign In/Sign Up Form<span><span></span>></span>
</span>
  <span><span><span><link> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style> type<span >="text/css"</style></span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span><span><span><span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script> src<span >="https://code.jquery.com/jquery-1.10.2.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="javascript/semantic.js"</script></span> type<span>="text/javascript"</span>></span><span><span></span>></span>
</span>
  <span><span><span><script> type<span >="text/javascript"</script></span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></span>></span>      
</span><span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><meta> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title>></title></span>Semantic UI Sign In/Sign Up Form<span><span></span>></span>
</span>
  <span><span><span><link> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style> type<span >="text/css"</style></span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></span>></span>
</span>
<span><span><span></span>></span>
</span><span><span><span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script> src<span >="https://code.jquery.com/jquery-1.10.2.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="javascript/semantic.js"</script></span> type<span>="text/javascript"</span>></span><span><span></span>></span>
</span>
  <span><span><span><script> type<span >="text/javascript"</script></span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></span>></span>      
</span><span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></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> class<span>="ui raised segment signin"</span>>
  <span><span><span><h3 id="class-span-ui-inverted-blue-block-header-span-gt"> class<span>="ui inverted blue block header"</span>></h3></span> SIGN IN <span><span></span>></span>
</span>  <span><span><span><div> class<span>="ui two column grid basic segment"</span>>
    <span><span><span><div> class<span>="column"</span>>
      <span><span><span><div> class<span>="ui blue stacked segment"</span>>
           <span><!-- form here -->
</span>      <span><span><span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="ui vertical divider"</span>> OR <span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="center aligned column"</span>>
      <span><!-- Facebook button here -->
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="ui divider"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="footer"</span>>
    <span><!-- text plus button here -->
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><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> class<span>="ui form"</span>>
  <span><span><span><div> class<span>="field"</span>>
    <span><span><span><label>></label></span> Username <span><span></span>></span>
</span>    <span><span><span><div> class<span>="ui left labeled icon input"</span>>
      <span><span><span><input> type<span>="text"</span>></span>
</span>      <span><span><span><i> class<span>="user icon"</span>></i></span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="field"</span>>
    <span><span><span><label>></label></span> Password <span><span></span>></span>
</span>    <span><span><span><div> class<span>="ui left labeled icon input"</span>>
      <span><span><span><input> type<span>="password"</span>></span>
</span>      <span><span><span><i> class<span>="lock icon"</span>></i></span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="inline field"</span>>
    <span><span><span><div> class<span>="ui checkbox"</span>>
      <span><span><span><input> id<span>="remember"</span> type<span>="checkbox"</span>></span>
</span>      <span><span><span><label> for<span>="remember"</span>></label></span> Remember me <span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="ui red submit button"</span>> Sign In <span><span></span></span>
</div></span>></span>
</span><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 id="class-span-ui-header-span-gt"> class<span>="ui header"</span>></h4></span> Sign in with: <span><span></span>></span>
</span><span><span><span><div> class<span>="ui facebook button"</span>>
  <span><span><span><i> class<span>="facebook icon"</span>></i></span><span><span></span>></span>
</span>  Facebook
<span><span><span></span></span></span></span>
</div></span>></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> class<span>="text"</span>> Not a member? <span><span></span></span>
</div></span>></span>
</span><span><span><span><div> class<span>="ui vertical animated blue mini button signup"</span>>
  <span><span><span><div> class<span>="visible content"</span>> Join Us <span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="hidden content"</span>>
    <span><span><span><i> class<span>="users icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><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> class<span>="ui raised segment signup inactive"</span>>
  <span><span><span><h3 id="class-span-ui-inverted-blue-block-header-span-gt"> class<span>="ui inverted blue block header"</span>></h3></span> SIGN UP <span><span></span>></span>
</span>  <span><span><span><div> class<span>="ui blue stacked segment"</span>>
       <span><!-- form here -->
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="ui divider"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="footer"</span>>
    <span><span><span><div> class<span>="text"</span>> Already a member? <span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="ui vertical animated blue mini button signin"</span>>
      <span><span><span><div> class<span>="visible content"</span>> Log In <span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="hidden content"</span>>
        <span><span><span><i> class<span>="sign in icon"</span>></i></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><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> class<span>="ui form"</span>>
  <span><span><span><div> class<span>="two fields"</span>>
    <span><span><span><div> class<span>="field"</span>>
      <span><!-- Username here -->              
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="field"</span>>
      <span><!-- Email here -->
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="two fields"</span>>
    <span><span><span><div> class<span>="field"</span>>
      <span><!-- Password here -->        
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="field"</span>>
      <span><!-- Confirm Password here -->
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="inline field"</span>>
    <span><!-- checkbox here -->
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="ui red submit button"</span>> Sign Up <span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="ui error message"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

Hier ist der Code für das Feld

E -Mail :

<span><span><span><label>></label></span> Username <span><span></span>></span>
</span><span><span><span><div> class<span>="ui left labeled icon input"</span>>
  <span><span><span><input> id<span>="username"</span> placeholder<span>="e.g., Tarzan"</span> type<span>="text"</span>></span>
</span>  <span><span><span><i> class<span>="user icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span><div> class<span>="ui corner label"</span>>
    <span><span><span><i> class<span>="asterisk icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span></span>

Hier ist der Code für das Feld

Passwort :

<span><span><span><label>></label></span> Email <span><span></span>></span>
</span><span><span><span><div> class<span>="ui left labeled icon input"</span>>
  <span><span><span><input> id<span>="email"</span> placeholder<span>="e.g., tarzan@jungle.org"</span> type<span>="text"</span>></span>
</span>  <span><span><span><i> class<span>="mail icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span><div> class<span>="ui corner label"</span>>
    <span><span><span><i> class<span>="asterisk icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span></span>

Hier ist der Code für das Feld

Bestätigen Sie das Kennwort :

<span><span><span><label>></label></span> Password <span><span></span>></span>
</span><span><span><span><div> class<span>="ui left labeled icon input"</span>>
  <span><span><span><input> id<span>="password"</span> placeholder<span>="e.g., !@#$%^&*()_+:)"</span> type<span>="password"</span>></span>
</span>  <span><span><span><i> class<span>="lock icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span><div> class<span>="ui corner label"</span>>
    <span><span><span><i> class<span>="asterisk icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span></span>

und der Code für das Kontrollkästchen:

<span><span><span><label>></label></span> Confirm Password <span><span></span>></span>
</span><span><span><span><div> class<span>="ui left labeled icon input"</span>>
  <span><span><span><input> id<span>="confirm-password"</span> placeholder<span>="e.g., !@#$%^&*()_+:)"</span> type<span>="password"</span>></span>
</span>  <span><span><span><i> class<span>="lock icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span><div> class<span>="ui corner label"</span>>
    <span><span><span><i> class<span>="asterisk icon"</span>></i></span><span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span></span>

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

<span><span><span><div> class<span>="ui checkbox"</span>>
  <span><span><span><input> id<span>="terms"</span> type<span>="checkbox"</span>></span>
</span>  <span><span><span><label> for<span>="terms"</span>></label></span> I agree to the <span><span><a> href<span>="#"</span>></a></span> Terms and Conditions <span><span></span>></span><span><span></span>></span>
</span><span><span><span></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!