Hallo Habr! Neulich bin ich auf einen sehr interessanten Artikel in Portugiesisch gestoßen. Zum Glück haben wir die englische Version gefunden. Ich mache Sie auf eine Übersetzung ins Russische aufmerksam. Sie finden meine anderen Übersetzungen auf meiner Seite auf Habr.
Ursprünglicher Link:
Portugiesisch ,
EnglischFür diejenigen, die nicht im Thema sind. Styled-Components ist eine sehr beliebte Bibliothek unter Entwicklern von React & Ract. Sie können benutzerdefiniertes CSS direkt in JS schreiben.
In Vue wissen wir, wie bequem es ist, mit Single-File-Komponenten (SFC) zu arbeiten, da alle erforderlichen Komponenten an einem Ort gesammelt werden. Das SFC-Muster hat die Popularität von Vue erheblich erhöht.
In den letzten Monaten hatte ich die Gelegenheit, an der Entwicklung eines Großprojekts zu React teilzunehmen. Wir haben Styled-Components verwendet, und es war eine sehr interessante Erfahrung.
In den meisten meiner Projekte verwende ich jedoch Vue. Daher wollte ich natürlich neue Erfahrungen mit Styled-Components und den Vorteilen des Vue.js-Ökosystems kombinieren. Damals stellte ich fest, dass eine solche Lösung bereits existiert und von denselben Entwicklern wie eine ähnliche Bibliothek unter React:
vue-styled-components unterstützt wird .
Starten Sie
Legen Sie das leere Geschwätz beiseite und fahren Sie mit dem Code fort. Verwenden Sie wie gewohnt Garn oder npm.
// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components
Auf meinem
Github finden Sie ein Repository mit Beispielen für die Verwendung dieser Bibliothek.
Jedes in den Beispielen verwendete Element kann von Komponenten im Vue-Stil als isolierte Komponente mit ihren individuellen Eigenschaften oder durch Empfangen von Daten von anderen Komponenten verarbeitet werden.
Unser erstes Beispiel ist nur eine Schaltfläche mit Standardstilen.
import styled from "vue-styled-components"; const CButton = styled.button` font-size: 1em; text-align: center; color: #FFFFFF; border-radius: 5px; padding: 10px 15px; background-color: #0057AA; `; export default CButton;
Überall in unserer Anwendung können wir diese Komponente verwenden.
import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, }
Parameter übergeben
In vue-styled-Komponenten können Sie Stile für eine Komponente dynamisch definieren, indem Sie diese Werte über Eigenschaften übergeben. Dieses Beispiel zeigt, dass die Schaltfläche beim Übergeben des Hauptattributs einen neuen Hintergrundstil und eine neue Schriftfarbe erhält.
import styled from "vue-styled-components"; const typeButton = { primary: Boolean }; const CButtonProps = styled('button', typeButton)` font-size: 1em; text-align: center; color: ${props => props.primary ? '#0057AA' : '#FFFFFF'}; border-radius: 5px; padding: 10px 15px; background-color: ${props => props.primary ? '#FFFFFF' : '#0057AA'}; `; export default CButtonProps;
Das obige Beispiel kann verbessert und sogar neue Eigenschaften hinzugefügt werden (Sie können so viele Attribute übergeben, wie Sie möchten). Alles läuft nach Ihren Bedürfnissen innerhalb des Projekts.
Mit Hilfe dieser Bibliothek erhalten wir die Möglichkeit, Stile durch Logik zu verwalten. Im folgenden Beispiel haben Sie die Möglichkeit, das Farbschema auszuwählen, das Sie Ihrer Schaltfläche zuweisen möchten, ohne die anderen zu beeinflussen, wodurch Ihre Anwendung diversifiziert wird.
import styled from "vue-styled-components"; const typeButton = { type: String, radius: Boolean }; const styleButton = type => { switch (type) { case "primary": return ` background-color: #FFFFFF; color: #0057AA; `; case "error": return ` background-color: #B4000B; color: #FDFDFD; `; case "success": return ` background-color: #00C887; color: #37435F; `; default: return ` background-color: #0057AA; color: #FFFFFF; `; } } const CButtonPropsCond = styled('button', typeButton)` font-size: 1em; text-align: center; padding: 10px 15px; border-radius: ${({ radius }) => radius ? "6px" : null}; ${(props) => styleButton(props.type)} `; export default CButtonPropsCond;
Um den Prozess des Erstellens dieser Schaltfläche besser zu erklären: Wir importieren zuerst (immer) Komponenten im Vue-Stil. Gleich danach (von Zeile 3 bis Zeile 6) müssen wir bestimmen, welche Arten von Eigenschaften an die Komponente übergeben werden. In den Zeilen 8 bis 31 erstellen wir eine Funktion, die den Wert der type-Eigenschaft entsprechend der Übergabe übernimmt und die Attribute des Hintergrunds zurückgibt. die Farbe und Farbe ihres jeweiligen Registers. Wenn nichts als Eigenschaft übergeben wird, wird der Schaltfläche der Standardwert zugewiesen.
Dank dieses Wissens können Sie neue Attribute implementieren, die Ihre benutzerdefinierte Komponente sehr dynamisch machen.
Ich habe diese kleinen Beispiele in meinem GitHub belassen, damit Sie den ersten Schritt zur Beherrschung dieser Bibliothek machen können. Genieße es.
Link zum Repository mit Beispielen .