Author: | marco-gonella |
---|---|
Official Page: | Go to website |
Publish Date: | December 18, 2017 |
License: | MIT |
Description:
A simple Angular component that allows you to create a responsive, configurable Portfolio on the app.
Usage:
In your html:
<ng-portfolio items="items" areas="areas" generic-config="genericConfig"></ng-portfolio>
Create items to be presented in the portfolio.
[ { //VALUE OPTIONS //base usage "value": "value to be showed", //Use %i% as a placeholder to set in your value, icons //i suggest to use font-awesome as icon library "value": "this string will contain an icon here --> %i%", //to set icon class, it becomes: " string.. <i class="fa fa-html5"></i>" "icon": "fa fa-html5", //FONT //To use font-family(css attribute) import a font in your css //example: @import url("https://fonts.googleapis.com/css?family=Audiowide"); "font": "'Audiowide', cursive", //font dimension "fontSize": "0.8em", //IMAGE "image": "./imgs/hamburg.jpg", //SHADE IMAGE "shadeFocus": true, //ZOOM OPTIONS //to set zoom operation on item "focusScale": 1.6, //to set the zoom center, 50% 50% is default (item center) "focusCenter": "50% 50%", //BACKGROUND OPTIONS //set text color "textColor": "#f96855", //set background color "backgroundColor": "#FFFA5C", //HOVER OPTIONS //on hover set text color "hoverTextColor": "#f96855", //on hover set background color "hoverBackgroundColor": "#FFFA5C", //ANIMATIONS //set animation time on all properties //default for image: "0,5s" else is disabled "animationTime": "0.9s", //ID //All items have an id (html id) //by default items passed by "items" attribute are sequencially named as "item1", "item2", "item3" etc.. //But you can override default configuration with: "id": "myId", //so, for example you can have "item1", "myId", "item3" (if you set id attribute on second items config) //SUBITEMS //In subitems you can set recoursive items configuration "subitems": [ //items.. { "value": "%i%", "icon": "fa fa-linkedin-square", "fontSize": "1.2em" //item attributes.. }, { "id": "mySubId", "subitems":[...] }, ... ], //by default subitems are sequencially named as "(parent id)-sub1", "(parent id)-mySubId", "(parent id)-sub3" etc.. //AREAS //look point 2 "areas" "areas":[ ["item1", "item2", "item3"], ["item1", "item2", "item3"] ] //GENERICCONFIG //look point 3 "generic-config" //CALLBACKS //use this sintax to pass a callback //in a configuration (object/json) "callback": { "name": "navigate", "params": ["http://www.hamburg.com/"] }, "callback": function(..){....} //differences: //To use "callback: function(){..}", you have to set callback with a function in your js, //so you have to manipulate your config. //to use "callback: { name: "fn name", params: ["param1", "param2", etc..]}" you don't have to set any //functions to your config, just set in your controller $scope (direct parent of this directive) your function, //es: $scope.navifate = function(url){..}; } ]
Configuration options.
//Use generic-config to set generic default behavior of your main portfolio layer or subitems //all this options can be overridden by item options. //STRUCTURE OPTIONS //Set portfolio columns, or subitems columns //if areas row elements are more than nCols value, nCols is overridden "nCols": 3, //Set portfolio row size, or subitems row size //by default is 200px "sizeRow": "1fr", //set gap between items //by default a media query set general portfolio gap as //20px(sreen 1200px+), 10px(sreen 768px+), 0px(sreen 0px+) "gap": "10px", //BACKGROUND OPTIONS //set text color "textColor": "#f96855", //set background color "backgroundColor": "#FFFA5C", //HOVER OPTIONS //on hover set text color "hoverTextColor": "#f96855", //on hover set background color "hoverBackgroundColor": "#FFFA5C", //ANIMATIONS //set animation time on all properties //default for image: "0,5s" else is disabled "animationTime": "0.9s", //FONT //To use font-family(css attribute) import a font in your css //example: @import url("https://fonts.googleapis.com/css?family=Audiowide"); "font": "'Audiowide', cursive", //font dimension "fontSize": "0.8em",