« *Troll* » : différence entre les versions
De WikiPedro!
Aucun résumé des modifications |
Aucun résumé des modifications |
||
Ligne 1 : | Ligne 1 : | ||
[[Fichier:Troll-face-Thug-life.png|centré|sans_cadre|Troll life is good !]] | [[Fichier:Troll-face-Thug-life.png|centré|sans_cadre|Troll life is good !|alt=Troll life is good !]] | ||
Payer 30€ {{Clickable button 3|Payer 30€|class=mw-ui-progressive}} | Payer 30€ {{Clickable button 3|Payer 30€|class=mw-ui-progressive}} | ||
<syntaxhighlight> | |||
<template> | |||
<cdx-button :disabled="showMessage" @click="showMessage = true"> | |||
Show message | |||
</cdx-button> | |||
<cdx-message | |||
v-if="showMessage" | |||
type="success" | |||
:fade-in="true" | |||
:auto-dismiss="true" | |||
:display-time="3000" | |||
> | |||
Success! This message will disappear... | |||
</cdx-message> | |||
</template> | |||
<script> | |||
const { defineComponent } = require("vue"); | |||
const { CdxMessage, CdxButton } = require("@wikimedia/codex"); | |||
module.exports = defineComponent({ | |||
name: "MessageAutoDismiss", | |||
components: { CdxMessage, CdxButton }, | |||
data() { | |||
return { | |||
showMessage: false, | |||
}; | |||
}, | |||
}); | |||
</script> | |||
</syntaxhighlight> |
Version du 20 octobre 2024 à 16:51

<template>
<cdx-button :disabled="showMessage" @click="showMessage = true">
Show message
</cdx-button>
<cdx-message
v-if="showMessage"
type="success"
:fade-in="true"
:auto-dismiss="true"
:display-time="3000"
>
Success! This message will disappear...
</cdx-message>
</template>
<script>
const { defineComponent } = require("vue");
const { CdxMessage, CdxButton } = require("@wikimedia/codex");
module.exports = defineComponent({
name: "MessageAutoDismiss",
components: { CdxMessage, CdxButton },
data() {
return {
showMessage: false,
};
},
});
</script>