Blade

Blades allow users to view details of page elements or engage in secondary activities to the content they’re viewing while maintaining the majority of the page view. Unlike modals, blades always open from the right side of the screen. :::

Opening a Blade

A parent Dashboard Component is required for Blades to work properly. All the examples below assume that your application has a parent Dashboard. We suggest one Dashboard component at the root of your application.

To open a blade, inject bladeLayer into your view. Then run this.bladeLayer.open and pass in your component and data.

Usage

Use the title prop or slot to give your blade a title and then add your content. In this demo we pass in a custom title to our blade component.

<template>
  <div>
    <ci-button @click="openBlade">Open Blade</ci-button>
    <ci-button @click="closeBlade">Close Blade</ci-button>
  </div>
</template>

<script>
import BladeDemoBlade from './BladeDemoBlade.vue'


export default {
  inject: {
    bladeLayer : 'bladeLayer'
  },
  methods: {
    openBlade () {
      this.bladeLayer.open(BladeDemoBlade, { title: 'My Blade Title' })
    },
    closeBlade () {
      this.bladeLayer.close();
    }
  }
}
</script>

// MyBlade.vue
<template>
  <ci-blade :title="title">
    Content goes here.
  </ci-blade>
</template>

<script>
export default{
  props: {
    title: {
      type: String,
      default: 'Blade'
    }
  }
}
</script>

BladeLayerAPI	Args	Description
open	(component, data)	Opens the blade component passed in and sets bladeLayer.component & bladeLayer.data
close	-	Closes the blade and unsets bladeLayer.component & bladeLayer.data

Programmatically Closing a Blade

You have two options to close a blade programmatically:

1. From the view that opened it... inject bladeLayer and then run this.bladelayer.close()
2. From inside your blade... add a ref to your blade and then you can run this.$refs.myBlade.close(). You can include a payload if you want the blade to emit data to your view this.$refs.myBlade.close({...}). Add v-on="$listeners" to your blade if you want to listen to blade events.

Blade Actions

Use the actions slot to add buttons to your blade. They will be arranged side by side and spaced automatically. Only CiButton components can be added to the actions slot.

Add v-on="$listeners" to your <ci-blade> to listen to Blade Events.

// MyBlade.vue
<template>
  <ci-blade
    title="Actions Blade"
    ref="myblade"
    v-on="$listeners"
  >
    <template #actions>
      <ci-button
        v-if="!hideSecondaryButton"
        variant="brand-text"
        fullwidth
        @click="$refs.myblade.close('Secondary')"
      >
        Secondary
      </ci-button>
      <ci-button
        fullwidth
        @click="$refs.myblade.close('Primary')"
      >
        Primary
      </ci-button>
    </template>
  </ci-blade>
</template>

<script>
export default {
  props: {
    hideSecondaryButton: { type: Boolean, default: false }
  }
}
</script>

UX Rules

• These buttons should always be fullwidth.
• If there is only one button, use the default brand button
• If there are two buttons, use brand-text for the secondary action and the default brand button for the primary action
• Ensure the primary action is on the always on the right

Tabs in Blades

Use the tabs slot for blade tabs. If you use the tabs slot, the default slot content will not render.

UX Rules

• Blade tabs should always be subcompact
• Blade tabs should be left aligned.

<template>
  <ci-button @click="openBlade">Open Tabbed Blade</ci-button>
</template>

<script>
import MyTabbedBlade from 'some-path/MyTabbedBlade.vue'

export default {
  inject: {
    bladeLayer : 'bladeLayer'
  },
  methods: {
    openBlade () {
      this.bladeLayer.open(BladeDemoTabsBlade)
    }
  }
}
</script>

// MyTabbedBlade.vue
<template>
  <ci-blade>
    <template #title>Tabbed Blade</template>
    <template #tabs>
      <ci-tabs
        :tabs="tabs"
        variant="subcompact"
        align="left"
      >
        <template #tab-lorem-ipsum>Lorem Ipsum tab content</template>
        <template #tab-dolor>Dolor tab content</template>
        <template #tab-sit-amet>Sit Amet tab content</template>
      </ci-tabs>
    </template>
  </ci-blade>
</template>

<script>
export default {
  data() {
    return {
      tabs: [ 
        { title: 'Lorem Ipsum' },
        { title: 'Dolor' },
        { title: 'Sit Amet' }
      ]
    }
  }
}
</script>

Events

To listen to blade events, be sure to add v-on="$listeners" to your <ci-blade> in your template.

Event	Args	Emitted when...
@open	-	Blade is opened
@close	-	Blade is closed