{"id":5717,"date":"2016-09-08T02:50:39","date_gmt":"2016-09-08T02:50:39","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5717"},"modified":"2016-09-27T20:52:52","modified_gmt":"2016-09-27T20:52:52","slug":"flipcard-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flipcard-lightning-component\/","title":{"rendered":"Flipcard Lightning Component"},"content":{"rendered":"<p style=\"text-align: justify;\">There could be situation where we want to display a calculation or summary of some records. This information sometimes needed to be\u00a0stand out from other piece of data on same page. We may also\u00a0need component where number is displayed in big text and when cursor is moved, related information explaining calculation should be displayed. It can be achieved in many ways and one of them is to have animated flip card where information can be swapped on cursor hover\u00a0event.<\/p>\n<p style=\"text-align: justify;\">In this post, we will create a very simple animated Flip card Lightning component. This component will support\u00a0following properties<\/p>\n<ul>\n<li>Animation direction horizontal or Vertical<\/li>\n<li>Background color<\/li>\n<li>font color<\/li>\n<li>border color<\/li>\n<li>Text on front size<\/li>\n<li>Text on back side<\/li>\n<\/ul>\n<p><!--more-->You can modify this component to add many other properties like adding support for images, URL etc. I would keep this post as simple as possible.<\/p>\n<p>We would start directly with component itself.<\/p>\n<p><strong>FlipCard.cmp<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:component &gt;\r\n    &lt;aura:attribute type=&quot;string&quot; name=&quot;bgColor&quot; \/&gt;\r\n    &lt;aura:attribute type=&quot;string&quot; name=&quot;fontColor&quot; default=&quot;#000&quot;\/&gt;\r\n    &lt;aura:attribute type=&quot;string&quot; name=&quot;borderColor&quot; default=&quot;#000&quot;\/&gt;\r\n    &lt;aura:attribute type=&quot;string&quot; name=&quot;frontText&quot; \/&gt;\r\n    &lt;aura:attribute type=&quot;string&quot; name=&quot;backText&quot; \/&gt; \r\n    &lt;aura:attribute type=&quot;boolean&quot; name=&quot;isVerticalFlip&quot; default=&quot;false&quot; description=&quot;By default its Horizontal flip&quot; \/&gt;\r\n&lt;div class=&quot;{! 'slds flip-container ' + (v.isVerticalFlip == false ? 'horizontal' : 'vertical') }&quot; style=&quot;{! 'background-color:'+ v.bgColor+'; color: '+ v.fontColor+';border : 1px solid '+ v.borderColor}&quot;&gt;\r\n&lt;div class=&quot;flipper&quot;&gt;\r\n&lt;div class=&quot;front&quot;&gt;\r\n                {!v.frontText}\r\n            &lt;\/div&gt;\r\n&lt;div class=&quot;back&quot;&gt;\r\n                {!v.backText}\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/aura:component&gt;\r\n<\/pre>\n<h3>Adding conditional CSS class in Lightning Component<\/h3>\n<p style=\"text-align: justify;\">As shown in above code, we can use ternary operator to add CSS\u00a0class dynamically to Lightning component<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nclass=&quot;{! 'slds flip-container ' + (v.isVerticalFlip == false ? 'horizontal' : 'vertical') }&quot;\r\n<\/pre>\n<p>Next step is to add some CSS<\/p>\n<p><strong>FlipCard.css<\/strong><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.slds.THIS{\r\n    padding : 10px;\r\n    margin : 10px; \r\n    display: inline-block;\r\n    border-radius: 15px;\r\n    text-align: center;\r\n    font-size : 2em;\r\n} \r\n\r\n.THIS .flip-container {\r\n\tperspective: 1000px;\r\n} \r\n\/* hide back while swapping*\/\r\n.THIS .front, .THIS .back {\r\n\tbackface-visibility: hidden; \r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n\r\n.THIS.flip-container, .THIS .front, .THIS .back {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.THIS .front {\r\n\tz-index: 2;  \r\n}\r\n\r\n\/* Flip Speed *\/\r\n.THIS .flipper {\r\n\ttransition: 0.6s;\r\n\ttransform-style: preserve-3d; \r\n\tposition: relative; \r\n} \r\n\r\n.THIS.flip-container.horizontal:hover .flipper, .THIS.flip-container.horizontal.hover .flipper {\r\n\t\ttransform: rotateY(180deg);\r\n}\r\n\r\n.THIS.horizontal .front { \r\n\ttransform: rotateY(0deg);\r\n}\r\n\r\n\/* back, initially hidden pane *\/\r\n.THIS.horizontal .back {\r\n\ttransform: rotateY(180deg);\r\n}\r\n\r\n.THIS.flip-container.vertical:hover .flipper, .THIS.flip-container.vertical.hover .flipper {\r\n\t\ttransform: rotateX(180deg);\r\n}\r\n\r\n.THIS.vertical .front { \r\n\ttransform: rotateX(0deg);\r\n}\r\n\r\n\/* back, initially hidden pane *\/\r\n.THIS.vertical .back {\r\n\ttransform: rotateX(180deg);\r\n}\r\n<\/pre>\n<p style=\"text-align: justify;\">In above CSS code,\u00a0<em>transform\u00a0<\/em>property is used to flip the sides of\u00a0<em>div\u00a0<\/em>code either in X or Y axis.<\/p>\n<p style=\"text-align: justify;\">Only step left is to test this component. We can create sample application like below to add different flavors of this component in your application.<\/p>\n<p style=\"text-align: justify;\"><strong>Demo.app<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:application &gt;\r\n    &lt;ltng:require styles=&quot;\/resource\/SLDS_2_0_3\/assets\/styles\/salesforce-lightning-design-system.css&quot; \/&gt;\r\n&lt;div&gt; \r\n&lt;div style=&quot;width:400px;height:150px;&quot;&gt;\r\n                &lt;c:FlipCard borderColor=&quot;#16325c&quot; bgColor=&quot;#16325c&quot; fontColor=&quot;#FFF&quot; frontText=&quot;Why are you eagerly waiting for IPhone 7 ?&quot; backText=&quot;Wireless earpods, fast processor, Dual Camera...&quot; \/&gt;\r\n            &lt;\/div&gt;\r\n&lt;div style=&quot;width:400px;height:150px;&quot;&gt;\r\n                &lt;c:FlipCard borderColor=&quot;#e8e9ec&quot; bgColor=&quot;#f4f6f9&quot; fontColor=&quot;#000&quot; frontText=&quot; Salesforce Shield Platform Encryption&quot; backText=&quot;Shield Platform Encryption gives your data a whole new layer of security while preserving critical platform functionality. &quot; isVerticalFlip=&quot;true&quot;\/&gt;\r\n            &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/aura:application&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">As you must have noted, I am using <a href=\"https:\/\/www.lightningdesignsystem.com\/\">Salesforce Lightning Design System<\/a> as a static resource in above application.<\/p>\n<p style=\"text-align: justify;\">Hope this component would come handy to you sometime in future. Feedback and comments are welcome !!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A simple CSS based animated Flip card Lightning Component for beginners<\/p>\n","protected":false},"author":1,"featured_media":5779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-5717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/FlipCard-Component.gif?fit=420%2C328&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6496,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/embed-lightning-component-in-flow\/","url_meta":{"origin":5717,"position":0},"title":"Embed Lightning Component in Flow","author":"Jitendra","date":"June 24, 2018","format":false,"excerpt":"How to create a lookup field in Flow by embedding Lightning Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Use Lightning Component in Salesforce Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/06\/Screen-Shot-2018-06-24-at-10.52.30-PM.png?fit=1200%2C412&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6133,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/","url_meta":{"origin":5717,"position":1},"title":"Text Slider Lightning Component for Salesforce  with Live Demo","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to use Nested Components and create a simple yet powerful Text Slider Component in Lightning for Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Text Slider Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7129,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/change-icon-color-in-lightning-web-component\/","url_meta":{"origin":5717,"position":2},"title":"Change Icon Color in Lightning Web Component","author":"Jitendra","date":"June 30, 2020","format":false,"excerpt":"Why fill css property not working for LWC Icon","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/View-Source-code-of-LWC-Icon-as-svg.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5843,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-salesforce-lightning-component\/","url_meta":{"origin":5717,"position":3},"title":"Circular Progress Bar &#8211; Salesforce Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circular-Progress-Bar.gif?fit=332%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5751,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-selected-html-or-lightning-component-in-aura-iterator\/","url_meta":{"origin":5717,"position":4},"title":"Get Selected HTML or Lightning component in Aura Iterator","author":"Jitendra","date":"September 28, 2016","format":false,"excerpt":"How to detect event from Lightning Component and HTML5 components in Aura Iterator","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Get selected item in aura iterator component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":5717,"position":5},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5717"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5717\/revisions"}],"predecessor-version":[{"id":5722,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5717\/revisions\/5722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5779"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}