yarn install
yarn run serve
yarn run build
yarn run test
yarn run lint
Set of customizable components made with Tailwindcss
Home Page: https://64rcomponents.netlify.com/
License: MIT License
yarn install
yarn run serve
yarn run build
yarn run test
yarn run lint
Select styles are defined on components but it doesn't render properly when using the package
<style>
select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.5em 1.5em;
}
</style>
Provide a playground and extensible documentation with different examples on how to customize the components.
Detect if nuxt-link
or router-link
are registered and allow buttons to use them.
We'll need to make the R64Button
component functional
Right now we have a primary and secondary variant. We want to have a dynamic number of variants that can be defined trough the configuration theme.
We can have a variant
prop that receives the variant name according to the configured theme and render the proper classes.
Radio styles are defined on component but it doesn't render properly when using the package
<style>
input[type="radio"]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: 50%;
}
</style>
Button component should support a loading state.
Actually we have some kind of legacy support via busy
prop. Should be changed to loading
.
We should support different loading placeholders as well. So it should have a named slot for that, and by default provide some kind of loader
dev.vue
file with primary and secondary stylesWe should add a class to our components and target them in that way.
This will allow a easier customization for the package users
Add a withoutLabelClass
to apply when an input doesn't have a label.
As we are using a fixed height for inputs it actually causes having too much space below the input as there is no label on top of them.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.