vuejs template card_info

card_info vuejs template

La conception se bloc peut se faire en 3 partie 

1- Création du composant 

Vue.component('card_info',{
    delimiters: ['${', '}'],
    props: {
      card_info_header: { type: String, default: "Vente Amazon" },
      card_info_infos: { type: String,default: "1595,92€" },
      card_info_suffix: { type: String,default: "Total" },
      card_info_color:{ type: String,default: "" },
      card_info_show: { type: Boolean, default:false, },
    },
    template: '#template_card_info',
  });

Nous avons 3 élèments dynamiques le titre, le montant, et unité. Nous les appellerons respectivement "card_info_header", "card_info_infos" et "card_info_suffix". 

Le blog doit s'afficher dans certains conditions, la couleur de la bordure supérieur doit également être dynamique. cela ajoute deux variables "card_info_show"  et "card_info_color".

"#template_card_info" est l'id du template.

2 - Création du template 

<!-- template- -->
<template id="template_card_info">
	<div class="card_info" v-if="card_info_show" :class="card_info_color">
					<h4>
						<span class="card_info_header" v-html="card_info_header">Vente Amazon</span>
					</h4>
					<div class="card_info_body">
						<span class="infos" v-html="card_info_infos"></span><small class="infos_suffix" v-html="card_info_suffix"></small>
					</div>
				</div>
</template>

3  - SCSS

.card_info{
		padding: 3px 14px 6px;
    background-color: rgb(255, 255, 255);
    margin-right: 10px!important;
    box-shadow: 0 0 2px 0 #bfbfbf;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    position:relative;
    &::before{
    	content:""; position:absolute; top:0; left:0; right:0; bottom:auto; height:3px; background-color:rgb(149, 191, 71); border-radius: 2px 2px 0 0;
    }
    .card_info_header{    
    	max-width: calc(100% - 33px)!important;
    	overflow: hidden;    font-size: 13px; font-weight: 600;
    	white-space: nowrap; display: inline-block; text-overflow: ellipsis;
    	cursor: default; text-rendering: optimizeLegibility; 
    }
   .card_info_body{
   		.infos{    color: rgb(17, 17, 17);
		    font-size: 21px;
		    line-height: 20px;
		    margin-right: 5px;
		    cursor: default;
		  }
    }
}
.card_info.orange::before{
	background-color:rgb(246, 168, 0);
}

 

Exemple d'utilisation

See the Pen vuejs template card_info by stephane kouwa (@kksa888) on CodePen.