Creating an Application Using Styled-Components in Vue.js
Hello, Habr! The other day I came across one very interesting article in Portuguese. Fortunately, we managed to find its English version. I bring to your attention a translation into Russian. You can find my other translations on my page on Habr.
Original link: Portuguese , English
For those who are not in the subject. Styled-Components is a very popular library among React & Ract-native developers. It allows you to write custom CSS directly in JS.
In Vue, we know how convenient it is to work with single-file components (SFC), because all the necessary components are collected in one place. The SFC pattern has significantly increased the popularity of Vue.
The last few months I had the opportunity to take part in the development of a major project on React. We used Styled-Components in it, and it was a very interesting experience.
However, in most of my projects I use Vue, so it’s natural that I wanted to combine new experience with Styled-Components and the benefits of the Vue.js ecosystem. It was then that I discovered that such a solution already exists and is supported by the same creators as a similar library under React: vue-styled-components .
Set aside the empty chatter and move on to the code. As usual, use yarn or npm.
On my github you will find a repository with examples of using this library.
Each element used in the examples can be processed by vue-styled components as an isolated component with its individual properties or by receiving data from other components.
Our first example is just a button with default styles.
Anywhere in our application we can use this component.
In vue-styled-components, you can dynamically define styles for a component by passing these values through properties. This example illustrates that when the main attribute is passed, the button will receive a new background style and font color.
The above example can be improved and even added new properties (you can pass as many attributes as you want). Everything goes according to your needs within the project.
With the help of this library we get the opportunity to manage styles through logic. In the example below, you have the opportunity to choose which color scheme you want to assign to your button without affecting others, thereby diversifying your application.
To better explain the process of creating this button: we first (always) import vue-styled-components, right after (from line 3 to line 6) we need to determine what types of properties will be passed to the component. From line 8 to 31, we create a function that takes the value of the type property, in accordance with what was passed, it returns the attributes of the background. the color and color of their respective register, if nothing is passed as a property, the button will be assigned the default value.
Thanks to this knowledge, you can implement new attributes that will make your custom component very dynamic.
I left these little examples in my GitHub so that you can take the initial step in mastering this library. Enjoy it.
Link to the repository with examples .
Original link: Portuguese , English
For those who are not in the subject. Styled-Components is a very popular library among React & Ract-native developers. It allows you to write custom CSS directly in JS.
In Vue, we know how convenient it is to work with single-file components (SFC), because all the necessary components are collected in one place. The SFC pattern has significantly increased the popularity of Vue.
The last few months I had the opportunity to take part in the development of a major project on React. We used Styled-Components in it, and it was a very interesting experience.
However, in most of my projects I use Vue, so it’s natural that I wanted to combine new experience with Styled-Components and the benefits of the Vue.js ecosystem. It was then that I discovered that such a solution already exists and is supported by the same creators as a similar library under React: vue-styled-components .
Start
Set aside the empty chatter and move on to the code. As usual, use yarn or npm.
// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components
On my github you will find a repository with examples of using this library.
Each element used in the examples can be processed by vue-styled components as an isolated component with its individual properties or by receiving data from other components.
Our first example is just a button with default styles.
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;
Anywhere in our application we can use this component.
import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, }
Passing parameters
In vue-styled-components, you can dynamically define styles for a component by passing these values through properties. This example illustrates that when the main attribute is passed, the button will receive a new background style and font color.
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;
The above example can be improved and even added new properties (you can pass as many attributes as you want). Everything goes according to your needs within the project.
With the help of this library we get the opportunity to manage styles through logic. In the example below, you have the opportunity to choose which color scheme you want to assign to your button without affecting others, thereby diversifying your application.
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;
To better explain the process of creating this button: we first (always) import vue-styled-components, right after (from line 3 to line 6) we need to determine what types of properties will be passed to the component. From line 8 to 31, we create a function that takes the value of the type property, in accordance with what was passed, it returns the attributes of the background. the color and color of their respective register, if nothing is passed as a property, the button will be assigned the default value.
Thanks to this knowledge, you can implement new attributes that will make your custom component very dynamic.
I left these little examples in my GitHub so that you can take the initial step in mastering this library. Enjoy it.
Link to the repository with examples .
All Articles