bpit-vue
Intro
What is bpit/vue?
bpit/vue is not a component UI kit, we didn't have the consistent theme for these components, it's just a collection of effects components.
bpit/vue is a good place for beginners to learn How to create their UI Kits. Now, it's just a showcase of the effects I can gather from the Internet (codepen, github...) and transfered to vue things
What we focus?
We focus on the effects of these components other than functionailties. That's why it's not a ui kit.
We take more time on css part and hope to make it more general and easy to use, so we encapsulate them into vue component/directives.
Why we need it?
There are so many resources on the Internet, we can make use of them to save time and to be more efficient. bpit/vue collects them, encapsulates them, imporves them.
Install easy && Import on demand && Everything in one place
import on demand
npm install babel-plugin-import --save-dev
babel.config.js
plugins: [
[
"import",
{
libraryName: "@bpit/vue",
camel2DashComponentName: false,
customName: name => {
return `@bpit/vue/src/components/${name}`
}
}
]
]
import components
import { FlockBanner, FAB, FlockButton } from "@bpit/vue"
const FABItem = FAB.FABItem
const FABTrigger = FAB.FABTrigger
const FABContainer = FAB.FABContainer
sample
<FlockBanner>This is a banner!</FlockBanner>
<FlockButton>Submit</FlockButton>
<FABContainer :expand="expand">
<FABItem @click="test" href="#" style="background-color:red" tooltip="Google+"
>A</FABItem
>
<FABItem href="#" tooltip="Google+">B</FABItem>
<FABItem href="#" tooltip="Google+">C</FABItem>
<FABItem href="#" tooltip="Google+">D</FABItem>
<FABTrigger @click="test" class="trigger" tooltip="share"></FABTrigger>
</FABContainer>
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint