Card
Bulma styled Card component
Can be used outside of the Enso ecosystem.
For live examples and demos, you may visit laravel-enso.com
Installation
Install the package:
yarn add @enso-ui/card
(within Enso, remember to cd
into the client
folder before installing front-end assets)
Note that this package has a couple of external dependencies. Read here for more info.
Exports
@enso-ui/card/bulma
:
Card
,CardHeader
,CardContent
,CardImage
,CardFooter
,CardFooterItem
,CardControl
,CardBadge
,CardCollapse
,CardRefresh
,CardRemove
,
Usage
Import the desired component(s):
import { Card, CardHeader, ... } from '@enso-ui/card/bulma';
Card
This is the main component. It can optionally have, via slots:
- header, with:
- title
- controls
- image
- content
- footer, with:
- items
As noted above, you may skip one or more of these components, as required (for example, you may not need controls, a footer, etc).
Tip
Cards may be nested and when nesting them, the collapsible feature works as expected
Tip
You may use transitions for the cards.
Example:
import {
Card, CardHeader, CardControl, CardCollapse, CardContent,
CardFooter, CardFooterItem,
} from '@enso-ui/card/bulma';
<card collapsible>
<card-header>
<template v-slot:title>
<span class="icon is-small has-margin-right-small">
<fa icon="video"/>
</span>
My Title
</template>
<template v-slot:controls>
<card-control v-tooltip="'my tooltip'">
<span class="icon">
<fa icon="info-circle"/>
</span>
</card-control>
<card-control>
<span class="icon"
@click="$emit('edit')">
<fa :icon="['far', 'edit']"/>
</span>
</card-control>
<card-collapse/>
</template>
</card-header>
<card-content class="is-paddingless">
Actual content goes here
</card-content>
<card-footer>
<card-footer-item>
First footer item
</card-footer-item>
</card-footer>
</card>
Props
loading
-boolean
, optional - controls an overlay loadercollapsible
-boolean
, optional - needs to be true if you want the card to be collapsiblecollapsed
-boolean
, optional - controls the initial render statetransition
-boolean
, optional - if true, the destruction of the card is handled in such a way that that custom transitions work correctly even when removing the card.
Slots
default
, all content goes here
Events
collapse
expand
remove
CardHeader
The component is a container for the header contents.
Note that when using collapsible
clicking the header will work as collapse control too.
Slots
title
, for showing a titlecontrols
, for any Card controls
CardBadge
The component shows a badge within a Card's controls area.
Example:
<card>
<card-header>
<div slot="controls">
<card-badge label="some label"/>
</div>
</card-header>
</card>
Props
label
-string|number
, required,type
-string
, optional - controls the color of the tag, see here for more info.
CardCollapse
The component shows a dropdown indicator control and can be used to collapse or expand the card. To make the card collapsible you just have to use this component in the controls
slot of CardHeader
.
Example:
<card>
<card-header>
<div slot="controls">
<card-collapse/>
</div>
</card-header>
</card>
CardControl
The component is use to create custom controls.
Example:
<card>
<card-header>
<div slot="controls">
<card-control v-tooltip="'my tooltip'">
<span class="icon"
@click="doSomething">
<fa icon="info-circle"/>
</span>
</card-control>
</div>
</card-header>
</card>
Slots
default
, all content goes here
CardRefresh
The component is a refresh control for the card.
Example:
<card>
<card-header>
<div slot="controls">
<card-refresh @refresh="refresh"/>
</div>
</card-header>
</card>
Events:
refresh
, when clicked; the event needs to be handled by the developer.
CardRemove
The component is a remove/close control for the card.
Example:
<card>
<card-header>
<div slot="controls">
<card-remove @remove="handleRemoval"/>
</div>
</card-header>
</card>
CardContent
The component is the container for the card's content.
Example:
<card>
<card-content>
Place your content here
</card-content>
</card>
Slots
default
, all content goes here
CardFooter
The component is the container for the card's footer.
<card>
<card-header>
Header content here
</card-header>
<card-content>
Main content here
</card-content>
<card-footer>
Footer content here
</card-footer>
</card>
Slots
default
, all content goes here
Notice
A card footer should contain at least a card footer item if you want to go with the classic bulma design.
CardFooterItem
The component is the container for one footer item.
<card>
<card-content>
Main content
</card-content>
<card-footer>
<card-footer-item>
Item content
</card-footer-item>
<card-footer-item>
Item content
</card-footer-item>
</card-footer>
</card>
Slots
default
, all content goes here
CardImage
The component is the container for an image.
Example:
<card>
<card-image>
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</card-image>
</card>
Slots
default
, all content goes here
Questions & Issues
For questions and support please use the issues functionality for this package's github repository.
Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.
Issues not conforming to the guidelines may be closed immediately.
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!