Vue 2 | Toast | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <div class="wd-example-preview-toast">
                                                            <w-spacer top="small" left="small">
                                                              <w-stack direction="column" gap="medium">
                                                                <w-toggle v-model="toggleValue" :label="`Position: ${toastPosition}`" />
                                                                <w-button label="Show toast on the bottom" variant="primary" @click="addNewToast" />
                                                              </w-stack>
                                                            </w-spacer>
                                                            <div v-if="isLoaded">
                                                              <w-toast target=".wd-example-preview-toast" :position="toastPosition" :toasts="toastsData" />
                                                            </div>
                                                          </div>
                                                        </template>
                                                        
                                                        <script>
                                                        export default {
                                                          data() {
                                                            return {
                                                              isLoaded: false,
                                                              toastsData: [],
                                                              toggleValue: false
                                                            };
                                                          },
                                                          computed: {
                                                            toastPosition() {
                                                              return this.toggleValue ? 'top' : 'bottom';
                                                            }
                                                          },
                                                          mounted() {
                                                            this.isLoaded = true;
                                                          },
                                                          methods: {
                                                            addNewToast() {
                                                              this.toastsData = [];
                                                        
                                                              const newToast = { content: 'Message sent', variant: 'default', timeOut: 3000 };
                                                        
                                                              this.toastsData.push(newToast);
                                                            }
                                                          }
                                                        };
                                                        </script>

Name	Description	Type	Default	Values
position	Position of the toast	string	bottom	bottom, top
toasts	Array of objects. The required properties is `content`.	array	[]	[ { leadingIcon: String, content: String, actionId: String, actionLabel: String, variant: String (default, error), timeOut: Number } ]
target	Type string or an actual DOM node where you want render component	string\|object	body

Name	Description	Type
dismiss	Emits the event after the click or time out	{ "names": [ "Boolean" ] }
action	Emits the event after the clicking action button	{ "names": [ "undefined" ] }

Toast

Code

Props

Events