Modals.md

Fish Tank Modals

• Standard Modal

  

  <FishTankModal
    v-model="modal1"
    heading="Heading"
    escapeable>
  
    modal body content
  
    <div slot="footerRight">
      <ButtonPrimary>Action</ButtonPrimary>
    </div>
  
    <div slot="footerLeft">
      <ButtonPrimary>Search</ButtonPrimary>
    </div>
  
  </FishTankModal>

• Fixed Modal

  

  <Modal
    v-model="modal2"
    heading="Fixed Modal"
    class="my-custom-class"
    fixed>
    
    <Search24 slot="headingIcon"/>
    <LoremIpsum/>
    <template slot="headingExtra">
      <Home24/>
      Set as Home
    </template>
    
    <div slot="footerRight">
      <ButtonPrimary disabled>Search</ButtonPrimary>
    </div>
  </Modal>

  • Dialog Box Modal
  

  <DialogBox
    v-model="dialog"
    width="250px"
    heading="Heading"
    escapeable
    dialog>
  
    message
  
  </DialogBox>

Usage

To import the Modal into your component

import { 
  FishTankModal 
}  from '@fishtank/fishtank-vue'

To import the Dialog Box into your component

import { 
  DialogBox 
}  from '@fishtank/fishtank-vue'

Props

Name	Type	Description	Required	Default
heading	String (Hex color, or valid CSS color)	Start Color of Gradient	true	undefined
fixed	Boolean	Sets the modal height at 100% of the available space in the viewport	false	false
dialog	Boolean	Modal type is a dialog prompt	false	false
active	Boolean	Sets the modal as active, to manage whether to continue showing the modal if model data changes	false	false
escapable	Boolean	The esc button can close the Modal	false	false
width	String	The width of the Modal	false	undefined

Slots

headingIcon
Slot property for heading icon
<Search24 slot="headingIcon"/>

headingExtra
Slot heading extra area
<template slot="headingExtra"><Home24/>Set as Home</template>

footerRight
Slot footer right area
<div slot="footerRight"><ButtonPrimary>Action</ButtonPrimary></div>

footerLeft
Slot footer left area
<div slot="footerLeft"><ButtonPrimary>Search</ButtonPrimary></div>