Kongponents

# Modal

The KModal component is used to show content on top of existing UI. Typically used when confirming changes or while during a delete action.

<template>
  <div>
    <KModal
      title="Look Mah!"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan tincidunt velit ac vulputate. Aliquam turpis odio, elementum a hendrerit id, pellentesque quis ligula. Nulla ultricies sit amet nisi vitae congue. Quisque vitae ullamcorper leo, id pretium mi. Nam sed odio dapibus, dapibus augue at, pulvinar est."
      :isVisible="isVisible"
      @canceled="isVisible = false" />

    <KButton
      appearance="primary"
      @click="isVisible = true">Open Modal</KButton>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isVisible: false
    }
  }
}
</script>

# Props

# Functional

  • isVisible - Tells the component whether or not to render the open modal
  • @canceled - Emitted when cancel/close button is clicked

# Content

  • title - Text displayed in header if not using slot (Note: this field is still required for accessibility reasons even if using the slot)
  • hideTitle - If not using the header-content slot, tells the component whether or not to display the title
  • content - Text to display in content if not using slot

# Buttons & Appearance

  • actionButtonText - Change the text content of the submit/proceed button
  • actionButtonAppearance - Change the appearance of the submit/proceed button
  • cancelButtonText - Change the text content of the close/cancel button
  • cancelButtonAppearance - Change the appearance of the cancel button

# Slots

There are 4 designated slots you can use to display content in the modal.

  • header-content
  • body-content
  • footer-content - Contains cancel & action buttons by default.
  • action-buttons - Contains action buttons which are right-aligned. This slot will not exist if using footer-content slot.

# Usage

Using both the provided props and slot options we will now demonstrate how to customize the modal for a delete confirmation. Notice that even though we are using the header-content slot we still specify the title attribute for accessibility.

<template>
  <KModal
    :isVisible="isVisible"
    actionButtonText="Delete"
    actionButtonAppearance="danger"
    @canceled="slottedIsOpen = false"
    title="Delete Item">
    <template v-slot:header-content>
      <KIcon icon="dangerCircle" color="red" class="mr-2" />
      Delete Item
    </template>
    <template v-slot:body-content>Are you sure you want to delete this item? This action can not be undone.</template>
    <template v-slot:action-buttons>
      <KButton appearance="outline" class="mr-2">Back</KButton>
      <KButton appearance="secondary" class="mr-2">Skip</KButton>
      <KButton appearance="danger">Delete</KButton>
    </template>
  </KModal>
</template>

# Theming

Variable Purpose
--KModalBackdrop Backdrop color
--KModalMaxWidth Modal max width
--KModalBorder Modal border
--KModalHeaderColor Header text color
--KModalHeaderSize Header font size
--KModalHeaderWeight Header font weight
--KModalColor Main content text color
--KModalFontSize Main content text size

An Example of changing the the colors of KModal might look like.

Note: We are scoping the overrides to a wrapper in this example

<template>
  <div class="modal-wrapper">
    <KModal
      class="modal-wrapper"
      title="Look Mah!"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan tincidunt velit ac vulputate. Aliquam turpis odio, elementum a hendrerit id, pellentesque quis ligula."
      :isVisible="isVisible"
      @canceled="isVisible = false" />
  </div>
</template>

<style>
.modal-wrapper {
  --KModalHeaderColor: red;
  --KModalColor: blue;
  --KModalBackdrop: rgba(94, 174, 255, .25);
}
</style>

← Modal Fullscreen →