API tools faq
paste
Guest User

Untitled

a guest
Oct 23rd, 2018
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.94 KB | None | 0 0
raw download clone embed print report
  1. <template lang="html">
  2. <div>
  3.  
  4. <div class="box">
  5.  
  6.  
  7. <div class="columns">
  8. <div class="column">
  9. <b-field label="Name">
  10. <b-input v-model="name"></b-input>
  11. </b-field>
  12. </div>
  13. <div class="column">
  14. <b-field label="Name">
  15. <b-input v-model="name"></b-input>
  16. </b-field>
  17. </div>
  18. <div class="column">
  19. <b-field label="Name">
  20. <b-input v-model="name"></b-input>
  21. </b-field>
  22. </div>
  23. <div class="column">
  24. <b-field label="Name">
  25. <b-input v-model="name"></b-input>
  26. </b-field>
  27. </div>
  28. </div>
  29.  
  30. <!-- <vs-row vs-align="center" vs-type="flex" vs-justify="space-around" vs-w="12">
  31. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="2" vs-sm="6">
  32. <vs-input vs-label="Provincia" vs-placeholder="Placeholder" />
  33. </vs-col>
  34.  
  35. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="2" vs-sm="6">
  36. <vs-input vs-label="Municipio" vs-placeholder="Placeholder" />
  37. </vs-col>
  38.  
  39. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="2" vs-sm="6">
  40. <vs-input vs-label="Distrito Municipal" vs-placeholder="Placeholder" />
  41. </vs-col>
  42. </vs-row>
  43.  
  44. <vs-row vs-align="center" vs-type="flex" vs-justify="space-around" vs-w="12">
  45.  
  46. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="2" vs-sm="6">
  47. <vs-input vs-label="Sector" vs-placeholder="Placeholder" />
  48. </vs-col>
  49.  
  50. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="2" vs-sm="6">
  51. <vs-input vs-label="Barrio o Paraje" vs-placeholder="Placeholder" />
  52. </vs-col>
  53.  
  54. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="2" vs-sm="6">
  55. <vs-input vs-label="Sub barrio" vs-placeholder="Placeholder" />
  56. </vs-col>
  57. </vs-row> -->
  58.  
  59. </div>
  60.  
  61. <div class="box">
  62. <section>
  63. <b-field grouped group-multiline>
  64. <b-select v-model="defaultSortDirection">
  65. <option value="asc">Default sort direction: ASC</option>
  66. <option value="desc">Default sort direction: DESC</option>
  67. </b-select>
  68. <b-select v-model="perPage" :disabled="!isPaginated">
  69. <option value="5">5 per page</option>
  70. <option value="10">10 per page</option>
  71. <option value="15">15 per page</option>
  72. <option value="20">20 per page</option>
  73. </b-select>
  74. <div class="control">
  75. <button class="button" @click="currentPage = 2" :disabled="!isPaginated">Set page to 2</button>
  76. </div>
  77. <div class="control is-flex">
  78. <b-switch v-model="isPaginated">Paginated</b-switch>
  79. </div>
  80. <div class="control is-flex">
  81. <b-switch v-model="isPaginationSimple" :disabled="!isPaginated">Simple pagination</b-switch>
  82. </div>
  83. </b-field>
  84.  
  85. <b-table :data="data" :paginated="isPaginated" :per-page="perPage" :current-page.sync="currentPage"
  86. :pagination-simple="isPaginationSimple" :default-sort-direction="defaultSortDirection" default-sort="user.first_name">
  87.  
  88. <template slot-scope="props">
  89. <b-table-column field="id" label="ID" width="40" sortable numeric>
  90. {{ props.row.id }}
  91. </b-table-column>
  92.  
  93. <b-table-column field="user.first_name" label="First Name" sortable>
  94. {{ props.row.user.first_name }}
  95. </b-table-column>
  96.  
  97. <b-table-column field="user.last_name" label="Last Name" sortable>
  98. {{ props.row.user.last_name }}
  99. </b-table-column>
  100.  
  101. <b-table-column field="date" label="Date" sortable centered>
  102. <span class="tag is-success">
  103. {{ new Date(props.row.date).toLocaleDateString() }}
  104. </span>
  105. </b-table-column>
  106.  
  107. <b-table-column label="Gender">
  108. <b-icon pack="fas" :icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
  109. </b-icon>
  110. {{ props.row.gender }}
  111. </b-table-column>
  112. </template>
  113. </b-table>
  114. </section>
  115. </div>
  116. <!-- <vs-row vs-justify="center">
  117. <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="12">
  118. <vs-card>
  119. <vs-table search pagination :data="users">
  120. <template slot="header">
  121.  
  122. </template>
  123.  
  124. <template slot="thead">
  125. <div>
  126. <vs-th>Email</vs-th>
  127. <vs-th>Name</vs-th>
  128. <vs-th>Website</vs-th>
  129. <vs-th>Nro</vs-th>
  130. </div>
  131. </template>
  132.  
  133. <template slot-scope="{data}">
  134. <vs-tr :key="indextr" v-for="(tr, indextr) in data">
  135. <vs-td :data="data[indextr].email">{{data[indextr].email}}</vs-td>
  136. <vs-td :data="data[indextr].username">{{data[indextr].name}}</vs-td>
  137. <vs-td :data="data[indextr].id">{{data[indextr].id}}</vs-td>
  138. <vs-td :data="data[indextr].id">{{data[indextr].website}}</vs-td>
  139. </vs-tr>
  140. </template>
  141. </vs-table>
  142. </vs-card>
  143. </vs-col>
  144. </vs-row> -->
  145. </div>
  146. </template>
  147.  
  148.  
  149.  
  150. <script>
  151. export default {
  152. data: () => ({
  153. name: "",
  154. data: [],
  155. isPaginated: true,
  156. isPaginationSimple: false,
  157. defaultSortDirection: 'asc',
  158. currentPage: 1,
  159. perPage: 5,
  160. data: [{"id":1,"user":{"first_name":"Jesse","last_name":"Simmons"},"date":"2016/10/15 13:43:27","gender":"Male"},
  161. {"id":2,"user":{"first_name":"John","last_name":"Jacobs"},"date":"2016/12/15 06:00:53","gender":"Male"},
  162. {"id":3,"user":{"first_name":"Tina","last_name":"Gilbert"},"date":"2016/04/26 06:26:28","gender":"Female"},
  163. {"id":4,"user":{"first_name":"Clarence","last_name":"Flores"},"date":"2016/04/10 10:28:46","gender":"Male"},
  164. {"id":5,"user":{"first_name":"Anne","last_name":"Lee"},"date":"2016/12/06 14:38:38","gender":"Female"},
  165. {"id":6,"user":{"first_name":"Sara","last_name":"Armstrong"},"date":"2016/09/23 18:50:04","gender":"Female"},
  166. {"id":7,"user":{"first_name":"Anthony","last_name":"Webb"},"date":"2016/08/30 23:49:38","gender":"Male"},
  167. {"id":8,"user":{"first_name":"Andrew","last_name":"Greene"},"date":"2016/11/20 14:57:47","gender":"Male"},
  168. {"id":9,"user":{"first_name":"Russell","last_name":"White"},"date":"2016/07/13 09:29:49","gender":"Male"},
  169. {"id":10,"user":{"first_name":"Lori","last_name":"Hunter"},"date":"2016/12/09 01:44:05","gender":"Female"},
  170. {"id":11,"user":{"first_name":"Ronald","last_name":"Wood"},"date":"2016/12/04 02:23:48","gender":"Male"},
  171. {"id":12,"user":{"first_name":"Michael","last_name":"Harper"},"date":"2016/07/27 13:28:15","gender":"Male"},
  172. {"id":13,"user":{"first_name":"George","last_name":"Dunn"},"date":"2017/03/07 12:26:52","gender":"Male"},
  173. {"id":14,"user":{"first_name":"Eric","last_name":"Rogers"},"date":"2016/06/07 05:41:52","gender":"Male"},
  174. {"id":15,"user":{"first_name":"Juan","last_name":"Meyer"},"date":"2017/02/01 04:56:34","gender":"Male"},
  175. {"id":16,"user":{"first_name":"Lori","last_name":"Shaw"},"date":"2017/01/26 11:50:04","gender":"Female"},
  176. {"id":17,"user":{"first_name":"Lori","last_name":"Cunningham"},"date":"2016/05/01 10:00:56","gender":"Female"},
  177. {"id":18,"user":{"first_name":"Charles","last_name":"Graham"},"date":"2016/05/31 06:43:30","gender":"Male"},
  178. {"id":19,"user":{"first_name":"Henry","last_name":"Morrison"},"date":"2016/09/27 16:15:44","gender":"Male"},
  179. {"id":20,"user":{"first_name":"Albert","last_name":"Mendoza"},"date":"2016/08/08 05:29:24","gender":"Male"},
  180. {"id":21,"user":{"first_name":"Ruby","last_name":"Snyder"},"date":"2017/04/01 12:04:39","gender":"Female"},
  181. {"id":22,"user":{"first_name":"Jesse","last_name":"Warren"},"date":"2016/08/20 01:36:38","gender":"Male"},
  182. {"id":23,"user":{"first_name":"Carlos","last_name":"Ferguson"},"date":"2016/05/31 10:40:29","gender":"Male"},
  183. {"id":24,"user":{"first_name":"Melissa","last_name":"Peters"},"date":"2016/07/23 00:41:54","gender":"Female"},
  184. {"id":25,"user":{"first_name":"Arthur","last_name":"Garza"},"date":"2017/03/11 14:11:37","gender":"Male"},
  185. {"id":26,"user":{"first_name":"Joe","last_name":"Berry"},"date":"2016/07/09 15:16:56","gender":"Male"},
  186. {"id":27,"user":{"first_name":"Joseph","last_name":"Bishop"},"date":"2016/10/04 19:44:54","gender":"Male"},
  187. {"id":28,"user":{"first_name":"Sarah","last_name":"Harper"},"date":"2016/09/23 05:09:11","gender":"Female"},
  188. {"id":29,"user":{"first_name":"Christopher","last_name":"Fuller"},"date":"2016/04/12 00:05:35","gender":"Male"},
  189. {"id":30,"user":{"first_name":"Alan","last_name":"Mendoza"},"date":"2016/04/22 10:48:02","gender":"Male"},
  190. {"id":31,"user":{"first_name":"James","last_name":"Davis"},"date":"2017/01/16 15:17:03","gender":"Male"},
  191. {"id":32,"user":{"first_name":"Scott","last_name":"Welch"},"date":"2016/10/04 23:31:51","gender":"Male"},
  192. {"id":33,"user":{"first_name":"Mildred","last_name":"Myers"},"date":"2016/11/23 13:46:18","gender":"Female"},
  193. {"id":34,"user":{"first_name":"Victor","last_name":"Martinez"},"date":"2016/04/06 17:05:07","gender":"Male"},
  194. {"id":35,"user":{"first_name":"Susan","last_name":"Medina"},"date":"2016/12/09 10:33:37","gender":"Female"},
  195. {"id":36,"user":{"first_name":"Judy","last_name":"Long"},"date":"2016/07/26 16:19:04","gender":"Female"},
  196. {"id":37,"user":{"first_name":"Joan","last_name":"Myers"},"date":"2016/09/22 04:55:54","gender":"Female"},
  197. {"id":38,"user":{"first_name":"Rachel","last_name":"Gonzales"},"date":"2016/07/15 13:56:38","gender":"Female"},
  198. {"id":39,"user":{"first_name":"Roger","last_name":"Hunt"},"date":"2016/08/14 10:43:11","gender":"Male"},
  199. {"id":40,"user":{"first_name":"Dorothy","last_name":"Howard"},"date":"2016/06/19 05:34:49","gender":"Female"},
  200. {"id":41,"user":{"first_name":"Eugene","last_name":"Lynch"},"date":"2016/12/24 08:19:24","gender":"Male"},
  201. {"id":42,"user":{"first_name":"Kathy","last_name":"Webb"},"date":"2017/04/01 21:09:05","gender":"Female"},
  202. {"id":43,"user":{"first_name":"Antonio","last_name":"White"},"date":"2017/02/10 06:51:20","gender":"Male"},
  203. {"id":44,"user":{"first_name":"Louis","last_name":"Spencer"},"date":"2016/10/08 02:20:22","gender":"Male"},
  204. {"id":45,"user":{"first_name":"Andrea","last_name":"Marshall"},"date":"2016/09/04 10:59:57","gender":"Female"},
  205. {"id":46,"user":{"first_name":"Eugene","last_name":"Sims"},"date":"2017/03/15 06:39:48","gender":"Male"},
  206. {"id":47,"user":{"first_name":"Mildred","last_name":"Gibson"},"date":"2016/04/18 06:43:54","gender":"Female"},
  207. {"id":48,"user":{"first_name":"Joan","last_name":"Arnold"},"date":"2016/12/16 04:52:23","gender":"Female"},
  208. {"id":49,"user":{"first_name":"Jesse","last_name":"Schmidt"},"date":"2016/06/11 02:44:33","gender":"Male"},
  209. {"id":50,"user":{"first_name":"David","last_name":"Frazier"},"date":"2017/02/15 21:46:30","gender":"Male"},
  210. {"id":51,"user":{"first_name":"Nicholas","last_name":"Howell"},"date":"2016/11/01 15:08:31","gender":"Male"},
  211. {"id":52,"user":{"first_name":"Douglas","last_name":"Chapman"},"date":"2017/02/08 03:33:24","gender":"Male"},
  212. {"id":53,"user":{"first_name":"Bruce","last_name":"Simmons"},"date":"2016/07/14 12:11:17","gender":"Male"},
  213. {"id":54,"user":{"first_name":"Antonio","last_name":"George"},"date":"2016/11/07 19:12:55","gender":"Male"},
  214. {"id":55,"user":{"first_name":"Chris","last_name":"Marshall"},"date":"2016/07/03 12:11:45","gender":"Male"},
  215. {"id":56,"user":{"first_name":"Ashley","last_name":"Hudson"},"date":"2016/10/14 21:08:05","gender":"Female"},
  216. {"id":57,"user":{"first_name":"Alan","last_name":"Edwards"},"date":"2017/03/22 21:10:25","gender":"Male"},
  217. {"id":58,"user":{"first_name":"George","last_name":"Clark"},"date":"2016/04/28 03:15:05","gender":"Male"},
  218. {"id":59,"user":{"first_name":"Frank","last_name":"Porter"},"date":"2016/09/08 00:48:14","gender":"Male"},
  219. {"id":60,"user":{"first_name":"Christopher","last_name":"Palmer"},"date":"2016/05/24 08:58:12","gender":"Male"}]
  220. // users: [{
  221. // id: 1,
  222. // name: "Leanne Graham",
  223. // username: "Bret",
  224. // email: "Sincere@april.biz",
  225. // website: "hildegard.org"
  226. // },
  227. // {
  228. // id: 2,
  229. // name: "Ervin Howell",
  230. // username: "Antonette",
  231. // email: "Shanna@melissa.tv",
  232. // website: "anastasia.net"
  233. // },
  234. // {
  235. // id: 3,
  236. // name: "Clementine Bauch",
  237. // username: "Samantha",
  238. // email: "Nathan@yesenia.net",
  239. // website: "ramiro.info"
  240. // },
  241. // {
  242. // id: 4,
  243. // name: "Patricia Lebsack",
  244. // username: "Karianne",
  245. // email: "Julianne.OConner@kory.org",
  246. // website: "kale.biz"
  247. // },
  248. // {
  249. // id: 5,
  250. // name: "Chelsey Dietrich",
  251. // username: "Kamren",
  252. // email: "Lucio_Hettinger@annie.ca",
  253. // website: "demarco.info"
  254. // },
  255. // {
  256. // id: 6,
  257. // name: "Mrs. Dennis Schulist",
  258. // username: "Leopoldo_Corkery",
  259. // email: "Karley_Dach@jasper.info",
  260. // website: "ola.org"
  261. // },
  262. // {
  263. // id: 7,
  264. // name: "Kurtis Weissnat",
  265. // username: "Elwyn.Skiles",
  266. // email: "Telly.Hoeger@billy.biz",
  267. // website: "elvis.io"
  268. // },
  269. // {
  270. // id: 8,
  271. // name: "Nicholas Runolfsdottir V",
  272. // username: "Maxime_Nienow",
  273. // email: "Sherwood@rosamond.me",
  274. // website: "jacynthe.com"
  275. // },
  276. // {
  277. // id: 9,
  278. // name: "Glenna Reichert",
  279. // username: "Delphine",
  280. // email: "Chaim_McDermott@dana.io",
  281. // website: "conrad.com"
  282. // },
  283. // {
  284. // id: 10,
  285. // name: "Clementina DuBuque",
  286. // username: "Moriah.Stanton",
  287. // email: "Rey.Padberg@karina.biz",
  288. // website: "ambrose.net"
  289. // }
  290. // ]
  291. })
  292. };
  293. </script>
  294.  
  295. <style lang="stylus">
  296. .labelx {
  297. .vs-input {
  298. margin: 10px;
  299. }
  300. }
  301. </style>
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!