0.0.1 • Published 8 years ago
angular-naive-card v0.0.1
angular-naive-card
Super simple angular component to show data in a card.
Installation
Bower
bower install angular-naive-card
Npm
npm install angular-naive-card
Usage
Add angular-naive-card.(min).js to your main file (index.html)
<script type="text/javascript" src="bower_components/angular-naive-card/dist/angular-naive-card.js"></script>
Set
cabargues.naive-card
as a dependency in your modulevar myapp = angular.module('myapp', ['cabargues.naiveCard'])
Add naiveCard component to the wanted element passing the data to show, example:
<div naiveCard data=data></span>
The expected data structure is the following:
data = { title: 'title shown in the card', content: 'content to shown below the title', img: 'image to show', url: 'url to redirect the user on image click' }
Customize the UI
You have several ways to customize the UI to meet your project requirements.
Modify the original .scss and generate the .css file with your changes.
- Download or clone the project from github repository.
git clone https://github.com/cabargues/angular-naive-card.git
Modify the file src/naive-card/naive-card.scss as desired. All values are declared as SASS variables.`
// Contains all the styling for naive-card component // Container $naive-card-max-width: 100% !default; $naive-card-margins: 5px !default; $naive-card-container-margin: 0 !default; $naive-card-figure-max-width: 100% !default;
Build the project
npm run-script build
Copy the .css file somewhere in your project and reference it from your index.html.
Include the .scss in your workflow
All scss properties are declared as !default so you can import the .scss file and override the values with the ones that best fits your project.
TODO
Tests
0.0.1
8 years ago