card's Introduction

vue-bulma

A modern UI framework based on Vue and Bulma.

Install

Install with npm:

$ npm i vue-bulma --save

Install with yarn:

$ yarn add vue-bulma

Example

import Vue from 'vue'
import * as components from 'vue-bulma'

// In the global registration
for (const [key, value] of Object.entries(components)) {
  const name = value.name || `vb-${key.toLowerCase()}`
  Vue.component(name, value)
}

Development

We use Lerna to manage multiple packages.

$ npm i lerna --global

$ yarn bootstrap

Open Examples

$ yarn dev

Format packages

$ yarn run format

Create a package

# vue-bulma-container
$ lerna create vue-bulma-container
$ lerna add vue packages/vue-bulma-container/
$ lerna add bulma packages/vue-bulma-container/
$ cd packages/vue-bulma-container/
$ mkdir src
$ touch src/main.js
$ touch src/style.scss

Add to `vue-bulma`

$ lerna add vue-bulma-container packages/vue-bulma/

Team

Lead Maintainers

fundon, https://twitter.com/_fundon, https://www.npmjs.com/~fundon

Collaborators

fundon, https://twitter.com/_fundon, https://www.npmjs.com/~fundon

License

Licensed under MIT.

card's People

Contributors

Stargazers

Watchers

card's Issues

Slot content

Hi, is it possible to pass a content value from slot name reference such as footer slot?
ex.

My component

<template>
    <div>
        <base-card :icon="'angle-down'" :title="'Github'">
            //Slot
            <slot name="content" slot="content"></slot>
            // or Html
            <div slot="content">
                <div>
                    <h1>My custom Card Content</h1>
                    <p>Hello world</p>
                </div>
            </div>
            <card-footer-item slot="footer" :href="'https://github.com'">
                <span class="icon is-small">
                    <i aria-hidden="true" class="fa fa-refresh"></i>
                </span>
                &nbsp;&nbsp; Refresh token
            </card-footer-item>
        </base-card>
    </div>
</template>

<script>
    import {BaseCard, CardFooterItem} from 'vue-bulma-card';
    export default {
        components: {
            BaseCard,
            CardFooterItem
        }
    }
</script>


<test>
    <div slot="content">
        <div>
            <h1>My custom Card Content</h1>
            <p>Hello world</p>
        </div>
    </div>
</test>

Text not cropping when is longest as the card size

Hi, i was using the card component on my project and i found this problem when text is longest as the card size, i think text should be cropped but is exceding the card size.