SHARE
TWEET

approval update without header.vue

a guest Aug 19th, 2019 110 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <Page class="page">
  3.         <ActionBar>
  4.             <!-- <ActionItem ios.position="left" android.position="popup"></ActionItem>
  5.             <ActionItem ios.systemIcon="8" android.systemIcon="ic_menu_black_24dp"></ActionItem>
  6.             <NavigationButton icon="~/assets/images/Icon-Back.png" (tap)="goBack()"></NavigationButton> -->
  7.                
  8.                 <!-- <GridLayout rows="auto" columns="*,auto,auto">
  9.                     <Image col="0" row="0" src="~/assets/images/Icon-Back.png" class="image"/>
  10.                     <Label col="0" row="0" text="Daftar Approval" fontSize="18" />
  11.                 </GridLayout> -->
  12.            
  13.             <!-- <StackLayout orientation="horizontal">
  14.                 <Image src="~/assets/images/Icon-Back.png" width="20" height="20"/>
  15.                 <Label text="Daftar Approval" fontSize="18" />
  16.             </StackLayout> -->
  17.             <GridLayout rows="auto" columns="75,*,75" id="header">
  18.         <Label col="0" row="0" class="fa icon" :text="'fa-align-justify' | fonticon"/>
  19.         <Label col="1" row="0" text="Daftar Approval" horizontalAlignment="center" />
  20.     </GridLayout>
  21.         </ActionBar>
  22.             <ListView class="list-group" for="item in listViewData" :key="index">
  23.                 <v-template>
  24.                     <GridLayout rows="auto" columns="auto,*">
  25.                             <Image col="0" row="0" :src="item.imageUrl" class="item-image" stretch="aspectFill" />
  26.                         <GridLayout col="1" row="0" rows="45,45" columns="150,*,*">
  27.                             <Label col="0" row="0" :text="item.title" class="item-title" />
  28.                             <Label col="0" row="1" :text="item.description" class="item-description" />
  29.                             <Label col="1" row="1" :text="item.price" class="item-price" />
  30.                             <Label col="2" row="1" :text="item.time" class="item-time" />
  31.                         </GridLayout>
  32.                     </GridLayout>
  33.                 </v-template>
  34.             </ListView>
  35.     </Page>
  36. </template>
  37.  
  38. <script>
  39.     // import Header from "./Header";
  40.  
  41.     import {
  42.         isIOS,
  43.         isAndroid
  44.     } from "tns-core-modules/platform";
  45.     export default {
  46.         created() {
  47.             console.log("is IOS platform: " + isIOS);
  48.             console.log("is Android platform: " + isAndroid);
  49.         },
  50.         data() {
  51.             return {
  52.                 // isIOS: false,
  53.                 listViewData: [{
  54.                         title: "Maximo: PO1900023",
  55.                         description: "COO Package Rosemount",
  56.                         price: "Rp. 23,000,000",
  57.                         time: "30 min ago",
  58.                         imageUrl: "~/assets/images/Icon-Face.png"
  59.                     },
  60.                     {
  61.                         title: "E-Payroll: 78273",
  62.                         description: "Galih Satriaji",
  63.                         price: "Rp.7,450,000",
  64.                         time: "45 min ago",
  65.                         imageUrl: "~/assets/images/Icon-Face.png"
  66.                     },
  67.                     {
  68.                        title: "E-Payroll: 78273",
  69.                         description: "Galih Satriaji",
  70.                         price: "Rp.7,450,000",
  71.                         time: "45 min ago",
  72.                         imageUrl: "~/assets/images/Icon-Face.png"
  73.                     },
  74.                     {
  75.                         title: "E-Payroll: 78273",
  76.                         description: "Galih Satriaji",
  77.                         price: "Rp.7,450,000",
  78.                         time: "45 min ago",
  79.                         imageUrl: "~/assets/images/Icon-Face.png"
  80.                     },
  81.                     {
  82.                         title: "E-Payroll: 78273",
  83.                         description: "Galih Satriaji",
  84.                         price: "Rp.7,450,000",
  85.                         time: "45 min ago",
  86.                         imageUrl: "~/assets/images/Icon-Face.png"
  87.                     },
  88.                     {
  89.                        title: "E-Payroll: 78273",
  90.                         description: "Galih Satriaji",
  91.                         price: "Rp.7,450,000",
  92.                         time: "45 min ago",
  93.                         imageUrl: "~/assets/images/Icon-Face.png"
  94.                     },
  95.                     {
  96.                         title: "E-Payroll: 78273",
  97.                         description: "Galih Satriaji",
  98.                         price: "Rp.7,450,000",
  99.                         time: "45 min ago",
  100.                         imageUrl: "~/assets/images/Icon-Face.png"
  101.                     }
  102.                 ]
  103.             };
  104.         },
  105.         methods: {
  106.             onItemTap() {}
  107.         }
  108.         // components: {
  109.         //     Header
  110.         // }
  111.     };
  112. </script>
  113.  
  114. <style scoped>
  115.     /* action-bar {
  116.         background-color: transparent;
  117.     } */
  118.  
  119.     .item-image {
  120.         width: 58;
  121.         height: 58;
  122.         border-radius: 30;
  123.         margin: 10;
  124.     }
  125.  
  126.     .item-title {
  127.         color: #1a1919;
  128.         margin-top: 20;
  129.         font-size: 13;
  130.         font-weight: bold;
  131.     }
  132.  
  133.     .item-description {
  134.         font-size: 12;
  135.         color: #999999;
  136.         margin-bottom: 20;
  137.     }
  138.  
  139.     .item-price {
  140.         align-content: left;
  141.         color: #80aaff;
  142.         margin-bottom: 20;
  143.         font-size: 12;
  144.     }
  145.  
  146.     .item-time {
  147.         align-content: right;
  148.         color: #999999;
  149.         font-size: 12;
  150.         margin-bottom: 20;
  151.         margin-right: 5;
  152.     }
  153.  
  154.     .image {
  155.         width: 20;
  156.         height: 20;
  157.         align-content: left;
  158.     }
  159.  
  160.     #header .btn .icon {
  161.         padding: 0;
  162.         margin: 0;
  163.     }
  164.  
  165.     #header .btn.menu .icon {
  166.         height: 60%;
  167.     }
  168.  
  169.     #header .btn.pp .icon {
  170.         border: 2px solid #ffffff;
  171.         border-radius: 100%;
  172.     }
  173.  
  174. </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