Skip to content

Conversation

@i906
Copy link

@i906 i906 commented Jun 7, 2018

Adding slots allows certain HTML blocks to be overwritten.

Usage without slots

<vue-snotify :class="style"></vue-snotify>

Available slots

  • progressBar
  • inner
  • title
  • body
  • prompt
  • icon
  • buttons

Usage to override icon

<vue-snotify :class="style">
  <template slot="toast" slot-scope="{snotify}">
    <toast :toastData="snotify.toast" :key="snotify.toast.id" @stateChanged="snotify.stateChanged">
      <div class="icon" slot="icon" slot-scope="{toast}">
        <span class="w-48 rounded accent">
          <i class="material-icons" v-if="toast.config.type === 'success'">&#xE24B;</i>
        </span>
      </div>
    </toast>
  </template>
</vue-snotify>

Usage to allow HTML in body or title

<vue-snotify :class="style">
  <template slot="toast" slot-scope="{snotify}">
    <toast :toastData="snotify.toast" :key="snotify.toast.id" @stateChanged="snotify.stateChanged">
      <template slot="title" slot-scope="{toast}">
        <div class="snotifyToast__title" v-html="toast.title"></div>
      </template>
      <template slot="body" slot-scope="{toast}">
        <div class="snotifyToast__body" v-html="toast.body"></div>
      </template>
    </toast>
  </template>
</vue-snotify>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant