OpenCloud Design System

OcModal component ​

Description ​

The OcModal component can be used to display a modal to the user. Modals are generally used to force the user to focus on confirming or completing a single action.

Every modal gets automatically added a background which spans the whole width and height. The modal itself is aligned to center both vertically and horizontally.

Examples ​

Default ​

The most common use case of the component is in combination with a button that opens the modal. A modal needs at least a title attribute.

vue
<template>
  <oc-button @click="showModal">Show modal</oc-button>
  <oc-modal
    v-if="modalActive"
    title="Modal title"
    message="Some message."
    @confirm="confirm"
    @cancel="hideModal"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const modalActive = ref(false)

const showModal = () => {
  modalActive.value = true
}

const hideModal = () => {
  modalActive.value = false
}

const confirm = () => {
  // handle confirm...

  modalActive.value = false
}
</script>

Input ​

A modal can have an input field.

vue
<template>
  <oc-button @click="showModal">Show modal</oc-button>
  <oc-modal
    v-if="modalActive"
    title="Modal title"
    :has-input="true"
    input-label="Folder name"
    @confirm="confirm"
    @cancel="hideModal"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const modalActive = ref(false)

const showModal = () => {
  modalActive.value = true
}

const hideModal = () => {
  modalActive.value = false
}

const confirm = (value: string) => {
  // handle confirm...

  modalActive.value = false
}
</script>

Slot ​

The component provides a content slot to add custom content. This can even be a dynamically loaded component.

It can also be used for displaying custom modal actions. In this case, the actions need to be implemented manually, and hide-actions needs to be set to true so the default actions stay hidden.

vue
<template>
  <oc-button @click="showModal">Show modal</oc-button>
  <oc-modal v-if="modalActive" title="Modal title" :hide-actions="true">
    <template #content>
      <span>Your changes were not saved. Do you want to save them?</span>
      <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
        <div class="oc-modal-body-actions-grid">
          <oc-button
            class="oc-modal-body-actions-cancel oc-ml-s"
            appearance="outline"
            @click="hideModal"
            >Cancel
          </oc-button>
          <oc-button
            class="oc-modal-body-actions-secondary oc-ml-s"
            appearance="outline"
            @click="hideModal"
          >
            Don't Save
          </oc-button>
          <oc-button
            class="oc-modal-body-actions-confirm oc-ml-s"
            appearance="filled"
            @click="confirm"
            >Save
          </oc-button>
        </div>
      </div>
    </template>
  </oc-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const modalActive = ref(false)

const showModal = () => {
  modalActive.value = true
}

const hideModal = () => {
  modalActive.value = false
}

const confirm = () => {
  // handle confirm...

  modalActive.value = false
}
</script>

Properties ​

Emits ​

Slots ​