@gitlab/ui/dist/components/base/nav/nav.js

GitLab UI Components

import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlNav',
  props: {
    /**
     * Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')
     */
    align: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Set this prop when the nav is placed inside a card header
     */
    cardHeader: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Proportionately fills all horizontal space with nav items.
     * All horizontal space is occupied, but not every nav item has the same width
     */
    fill: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width
     */
    justified: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Renders the nav items with the appearance of pill buttons
     */
    pills: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Makes the nav smaller
     */
    small: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Renders the nav items with the appearance of tabs
     */
    tabs: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Specify the HTML tag to render instead of the default tag
     */
    tag: {
      type: String,
      required: false,
      default: 'ul'
    }
  },
  computed: {
    justifyContent() {
      if (!this.align) return '';
      const alignMapping = {
        left: 'start',
        right: 'end'
      };
      return `justify-content-${alignMapping[this.align] || this.align}`;
    },
    classes() {
      return {
        'nav-tabs': this.tabs,
        'nav-pills': this.pills && !this.tabs,
        'card-header-tabs': this.cardHeader && this.tabs,
        'card-header-pills': this.cardHeader && this.pills && !this.tabs,
        'nav-fill': this.fill,
        'nav-justified': this.justified,
        [this.justifyContent]: this.align,
        small: this.small
      };
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g({tag:"component",staticClass:"nav",class:_vm.classes},_vm.$listeners),[_vm._t("default")],2)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export { __vue_component__ as default };