AnyHeader

Back To Home

Back to Mapboard Topic Panel wiki

Any Header

If building an app from a config file, this component allows the user to add any header tag. It wraps text you input to it with an 'h1', 'h2', 'h3'... tag.

You can use this in a vue framework project that will be configured with another file. For instance it is used in Mapboard's TopicPanel.vue, in the address header, so that you can add another line beneath the address:

<any-header v-if="this.addressHeaderAdditionalInfo"
            :options="this.addressHeaderAdditionalHeaderOptions"
            :slots="this.addressHeaderAdditionalHeaderSlots"
/>

TopicPanel.vue has the following computeds to fill out this data:

addressHeaderAdditionalHeaderOptions() {
  if (this.$config.addressHeaderAdditionalInfo) {
    const ahai = this.$config.addressHeaderAdditionalInfo;
    if (ahai.options) {
      if (!ahai.options.headerType) {
        ahai.options.headerType = 'h4';
      }
      return ahai.options;
    }
  }
},
addressHeaderAdditionalHeaderSlots() {
  return {
    text: this.addressHeaderAdditionalInfo
  }
},
addressHeaderAdditionalInfo() {
  if (this.$config.addressHeaderAdditionalInfo) {
    const geocode = this.geocode;
    if (!geocode) return null;
    const ahai = this.$config.addressHeaderAdditionalInfo;
    let returned = [];
    if (ahai.preText) {
      returned.push(ahai.preText);
    }
    returned.push(geocode.properties[ahai.data]);
    console.log('returned:', returned);
    return returned.join(' ');
  }
},

Now it can be configured with a file like this:

mapboard({
  addressHeaderAdditionalInfo: {
    data: 'opa_account_num',
    preText: 'OPA #',
    options: {
      headerType: 'h3',
      style: 'margin-top: 5px; margin-bottom: 0px;',
    }
  },...