Skip to content

dreambo8563/bpit-vue

Repository files navigation

bpit-vue

Codacy Badge Greenkeeper badge Build Status Known Vulnerabilities

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

Releases

No releases published

Packages

No packages published