Shipnity Website Document

# Dialog

สำหรับทำ Modal

# Usage

<snt-dialog width="400px">
  <template #activator="{ on, attrs }">
    <snt-button
      class="my-filters"
      v-on="on">
      Click me
    </snt-button>
  </template>
  <div :style="{ backgroundColor: '#ffffff', height: '300px' }">
    Hello World
  </div>
</snt-dialog>

# API

# Examples

# Fullscreen

Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.

<snt-dialog fullscreen>
  <template #activator="{ on, attrs }">
    <snt-button
      class="my-filters"
      v-on="on">
      Click me
    </snt-button>
  </template>
  <div :style="{ backgroundColor: '#ffffff', height: '100%' }">
    Fullscreen
  </div>
</snt-dialog>

# Transitions

You can make the dialog appear from the top or the bottom.

<snt-dialog 
  width="400px"
  transition="dialog-bottom-transition">
  <template #activator="{ on, attrs }">
    <snt-button
      class="my-filters"
      v-on="on">
      Click me
    </snt-button>
  </template>
  <div :style="{ backgroundColor: '#ffffff', height: '300px' }">
    Transition
  </div>
</snt-dialog>

← Feed →