112 lines
2.5 KiB
Vue
112 lines
2.5 KiB
Vue
<template>
|
|
<div id="app">
|
|
<tabs>
|
|
<!-- <div> -->
|
|
<tab-item title="Onglet 1">
|
|
<p>Contenu 1</p>
|
|
</tab-item>
|
|
<tab-item title="Onglet 2">
|
|
<p>Contenu 2</p>
|
|
</tab-item>
|
|
<tab-item title="Onglet 3">
|
|
<p>Contenu 3</p>
|
|
</tab-item>
|
|
<!-- </div> -->
|
|
</tabs>
|
|
|
|
<error-boundary>
|
|
<card firstname="john" lastname="doe" />
|
|
</error-boundary>
|
|
<greet />
|
|
<counter :initialValue="58" />
|
|
<a-form @custom-event="logEventTime" />
|
|
|
|
<ul>
|
|
<li v-for="(person, index) in people" :key="person.lastname">
|
|
<card
|
|
v-if="index % 2 === 0"
|
|
:firstname="person.firstname"
|
|
:lastname="person.lastname"
|
|
/>
|
|
<card
|
|
v-else
|
|
alternate
|
|
:firstname="person.firstname"
|
|
:lastname="person.lastname"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
|
|
<panel>
|
|
<!-- <template v-slot:title>
|
|
Titre du panneau
|
|
</template> -->
|
|
<p>Un élément</p>
|
|
<p>Un autre élément</p>
|
|
</panel>
|
|
|
|
<custom-table :headers="['Prénom', 'Nom']" :items="people">
|
|
<template v-slot="{ item }">
|
|
<td>{{ item.firstname }}</td>
|
|
<td>{{ item.lastname }}</td>
|
|
</template>
|
|
<template v-slot:actions="{ item }">
|
|
<td>
|
|
<button>Supprimer {{ item.firstname }}</button>
|
|
</td>
|
|
</template>
|
|
</custom-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from "./components/Card";
|
|
import ErrorBoundary from "./components/ErrorBoundary";
|
|
import Panel from "./components/Panel";
|
|
import Tabs from "./components/Tabs";
|
|
import TabItem from "./components/TabItem";
|
|
import CustomTable from "./components/CustomTable";
|
|
import Counter from "./components/Counter.vue";
|
|
import AForm from "./components/AForm.vue";
|
|
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
// MyCard: Card,
|
|
CustomTable,
|
|
ErrorBoundary,
|
|
Tabs,
|
|
TabItem,
|
|
Panel,
|
|
Card,
|
|
Counter,
|
|
AForm,
|
|
},
|
|
data() {
|
|
return {
|
|
people: [
|
|
{ firstname: "john", lastname: "doe" },
|
|
{ firstname: "bob", lastname: "dylan" },
|
|
{ firstname: "john", lastname: "wick" },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
logEventTime(date) {
|
|
console.log("événément custom reçu à", date);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin-top: 60px;
|
|
}
|
|
</style>
|