SHARE
TWEET

Untitled

a guest Apr 25th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="container">
  3.     <div class="container__title">
  4.       <h1>Fiche d'information</h1>
  5.       <div class="container__title__button">
  6.         <button>Mode Lecture Seule</button>
  7.       </div>
  8.     </div>
  9.     <div class="container__body">
  10.       <div class="container__body__top-part">
  11.         <div class="card-input">
  12.           <label class="card-label" for="first-name">Prénom</label>
  13.           <input
  14.             id="first-name"
  15.             maxlength="20"
  16.             type="text"
  17.             v-model="firstName"
  18.           />
  19.         </div>
  20.         <div class="card-input">
  21.           <label class="card-label" for="last-name">Nom de famille:</label>
  22.           <input id="last-name" maxlength="20" type="text" v-model="lastName" />
  23.         </div>
  24.         <button class="container__body__top-part__button">
  25.           Montrer moins de détails
  26.         </button>
  27.       </div>
  28.  
  29.       <div class="container__body__bottom-part">
  30.         <div class="card-input">
  31.           <label class="card-label" for="favorite-color"
  32.             >Couleur préférée:</label
  33.           >
  34.           <input
  35.             id="favorite-color"
  36.             maxlength="20"
  37.             type="text"
  38.             v-model="favoriteColor"
  39.           />
  40.         </div>
  41.         <div class="card-input">
  42.           <label class="card-label" for="favorite-movie">Film préféré:</label>
  43.           <input
  44.             id="favorite-movie"
  45.             maxlength="20"
  46.             type="text"
  47.             v-model="favoriteMovie"
  48.           />
  49.         </div>
  50.       </div>
  51.     </div>
  52.   </div>
  53. </template>
  54.  
  55. <script>
  56. export default {
  57.   props: {
  58.     canEdit: {
  59.       type: Boolean,
  60.       required: false,
  61.       default: true
  62.     },
  63.     extended: {
  64.       type: Boolean,
  65.       required: false,
  66.       default: true
  67.     }
  68.   },
  69.   data() {
  70.     return {
  71.       firstName: "",
  72.       lastName: "",
  73.       favoriteColor: "",
  74.       favoriteMovie: ""
  75.     };
  76.   },
  77.   name: "identity-card"
  78. };
  79. </script>
  80.  
  81. <style scoped>
  82. .container {
  83.   display: flex;
  84.   flex-direction: column;
  85.   justify-content: flex-start;
  86.   max-width: 500px;
  87.   border: 2px solid green;
  88.   padding: 10px 25px;
  89.   border-radius: 5px;
  90.   background-color: rgba(128, 0, 128, 0.2);
  91.   color: blue;
  92. }
  93.  
  94. .container__title {
  95.   display: flex;
  96.   flex-direction: row;
  97.   justify-content: space-between;
  98. }
  99.  
  100. .container__title__button {
  101.   display: flex;
  102.   flex-direction: column;
  103.   justify-content: center;
  104. }
  105.  
  106. .container__body__top-part {
  107.   display: flex;
  108.   flex-direction: column;
  109.   justify-content: flex-start;
  110.   margin-bottom: 25px;
  111. }
  112.  
  113. .container__body__top-part,
  114. .container__body__bottom-part {
  115.   margin-left: 10px;
  116. }
  117.  
  118. .container__body__top-part__button {
  119.   align-self: flex-end;
  120. }
  121.  
  122. .card-input {
  123.   margin-bottom: 10px;
  124. }
  125.  
  126. .card-label {
  127.   display: inline-block;
  128.   min-width: 150px;
  129. }
  130. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top