vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update messages

pull/358/head
cagataycivici 2020-07-02 10:14:49 +03:00
parent 35d2e8b94b
commit 7347e3a16d
4 changed files with 42 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/message/MessageDemo.vue
View File

@ -28,12 +28,12 @@
<h5>Validation Message</h5> <h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem"> <div class="p-formgroup-inline" style="margin-bottom:.5rem">
<Label for="username" class="p-sr-only">Username</Label> <Label for="username" class="p-sr-only">Username</Label>
<InputText placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" class="p-invalid" />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="p-formgroup-inline"> <div class="p-formgroup-inline">
<Label for="email" class="p-sr-only">email</Label> <Label for="email" class="p-sr-only">email</Label>
<InputText placeholder="email" class="p-invalid" /> <InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage /> <InlineMessage />
</div> </div>
</div> </div>

4
src/views/message/MessageDoc.vue
View File

@ -251,12 +251,12 @@ import InlineMessage from 'primevue/inlinemessage';
&lt;h3&gt;Validation Message&lt;/h3&gt; &lt;h3&gt;Validation Message&lt;/h3&gt;
&lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt; &lt;div class="p-formgroup-inline" style="margin-bottom:.5rem"&gt;
&lt;Label for="username" class="p-sr-only"&gt;Username&lt;/Label&gt; &lt;Label for="username" class="p-sr-only"&gt;Username&lt;/Label&gt;
&lt;InputText placeholder="Username" class="p-invalid" /&gt; &lt;InputText id="username" placeholder="Username" class="p-invalid" /&gt;
&lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt; &lt;InlineMessage&gt;Username is required&lt;/InlineMessage&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-formgroup-inline"&gt; &lt;div class="p-formgroup-inline"&gt;
&lt;Label for="email" class="p-sr-only"&gt;email&lt;/Label&gt; &lt;Label for="email" class="p-sr-only"&gt;email&lt;/Label&gt;
&lt;InputText placeholder="email" class="p-invalid" /&gt; &lt;InputText id="email" placeholder="Email" class="p-invalid" /&gt;
&lt;InlineMessage /&gt; &lt;InlineMessage /&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>

42
src/views/toast/ToastDemo.vue
View File

@ -7,46 +7,22 @@
</div> </div>
</div> </div>
<div class="content-section implementation p-fluid"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Severities</h5> <h5>Severities</h5>
<div class="p-grid">
<div class="p-col-12 p-md-3">
<Button label="Success" class="p-button-success" @click="showSuccess" /> <Button label="Success" class="p-button-success" @click="showSuccess" />
</div>
<div class="p-col-12 p-md-3">
<Button label="Info" class="p-button-info" @click="showInfo" /> <Button label="Info" class="p-button-info" @click="showInfo" />
</div>
<div class="p-col-12 p-md-3">
<Button label="Warn" class="p-button-warning" @click="showWarn" /> <Button label="Warn" class="p-button-warning" @click="showWarn" />
</div>
<div class="p-col-12 p-md-3">
<Button label="Error" class="p-button-danger" @click="showError" /> <Button label="Error" class="p-button-danger" @click="showError" />
</div>
</div>
<h5>Positions</h5> <h5>Positions</h5>
<div class="p-grid"> <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
<div class="p-col-12 p-md-4">
<Button label="Top Left" @click="showTopLeft" />
</div>
<div class="p-col-12 p-md-4">
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /> <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
</div>
<div class="p-col-12 p-md-4">
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /> <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
</div>
</div>
<h5>Options</h5> <h5>Options</h5>
<div class="p-grid">
<div class="p-col-12 p-md-6">
<Button @click="showMultiple" label="Multiple" class="p-button-warning" /> <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
</div>
<div class="p-col-12 p-md-6">
<Button @click="showSticky" label="Sticky" /> <Button @click="showSticky" label="Sticky" />
</div>
</div>
<h5>Remove All</h5> <h5>Remove All</h5>
<Button @click="clear" label="Clear" /> <Button @click="clear" label="Clear" />
@ -105,3 +81,17 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
button {
min-width: 10rem;
margin-right: .5rem;
}
@media screen and (max-width: 960px) {
button {
width: 100%;
margin-bottom: .5rem;
}
}
</style>

50
src/views/toast/ToastDoc.vue
View File

@ -248,46 +248,22 @@ this.$toast.removeAllGroups();
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Severities&lt;/h3&gt; &lt;h5&gt;Severities&lt;/h5&gt;
&lt;div class="p-grid"&gt; &lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
&lt;div class="p-col-12 p-md-3"&gt; &lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
&lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt; &lt;Button label="Warn" class="p-button-warning" @click="showWarn" /&gt;
&lt;/div&gt; &lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;Button label="Warn" class="p-button-warning" @click="showWarn" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Positions&lt;/h3&gt; &lt;h5&gt;Positions&lt;/h5&gt;
&lt;div class="p-grid"&gt; &lt;Button label="Top Left" class="p-mr-2" @click="showTopLeft" /&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /&gt;
&lt;Button label="Top Left" @click="showTopLeft" /&gt; &lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Options&lt;/h3&gt; &lt;h5&gt;Options&lt;/h5&gt;
&lt;div class="p-grid"&gt; &lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
&lt;div class="p-col-12 p-md-6"&gt; &lt;Button @click="showSticky" label="Sticky" /&gt;
&lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6"&gt;
&lt;Button @click="showSticky" label="Sticky" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Remove All&lt;/h3&gt; &lt;h5&gt;Remove All&lt;/h5&gt;
&lt;Button @click="clear" label="Clear" /&gt; &lt;Button @click="clear" label="Clear" /&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>