Customize Layout

The EventExplorer UI is structured as follows:

Fig 1: Event Explorer UI and portal targets (click image to enlarge)

Every component can be overwritten by replacing it with your own component.

In the following example the header component is replaced by customized component MyHeader.

<template>
  <EventExplorerUi :config="config">
    <portal to="ex-header">
      <MyHeader />
    </portal>
  </EventExplorerUi>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import EventExplorerUi from '@id2/event-explorer-ui/components/EventExplorerUi.vue'
import MyHeader from '@/components/MyHeader.vue'

@Component({
  components: {
    EventExplorerUi,
    MyHeader,
  },
})
export default class IndexPage extends Vue {
  config = require('../conf/ex-config.json')
}
</script>

It is also possible to disable certain components by using an empty <div />.

In the following example the header is removed.

<template>
  <EventExplorerUi :config="config">
    <portal to="ex-header"><div /></portal>
  </EventExplorerUi>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import EventExplorerUi from '@id2/event-explorer-ui/components/EventExplorerUi.vue'

@Component({
  components: {
    EventExplorerUi,
  },
})
export default class IndexPage extends Vue {
  config = require('../conf/ex-config.json')
}
</script>