@gitlab/ui/dist/components/base/loading_icon/examples/loading_icon.all.example.js

GitLab UI Components

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

var _sizes = ['sm', 'md', 'lg', 'xl'];
var _colors = ['orange', 'dark', 'light'];
var script = {
  data: function data() {
    return {
      selectedSize: _sizes[0],
      selectedColor: _colors[0],
      isInline: false
    };
  },
  computed: {
    sizes: function sizes() {
      return _sizes;
    },
    colors: function colors() {
      return _colors;
    },
    backgroundStyle: function backgroundStyle() {
      return this.selectedColor === 'light' ? {
        backgroundColor: '#1f78d1',
        color: '#ffffff'
      } : {};
    }
  }
};

/* 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('div',[_c('p',[_vm._v("\n    Size:\n    "),_vm._l((_vm.sizes),function(size){return _c('label',{key:size},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.selectedSize),expression:"selectedSize"}],attrs:{"type":"radio","name":"size"},domProps:{"value":size,"checked":_vm._q(_vm.selectedSize,size)},on:{"change":function($event){_vm.selectedSize=size;}}}),_vm._v("\n      "+_vm._s(size)+" \n    ")])})],2),_vm._v(" "),_c('p',[_vm._v("\n    Color:\n    "),_vm._l((_vm.colors),function(color){return _c('label',{key:color},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.selectedColor),expression:"selectedColor"}],attrs:{"type":"radio","name":"color"},domProps:{"value":color,"checked":_vm._q(_vm.selectedColor,color)},on:{"change":function($event){_vm.selectedColor=color;}}}),_vm._v("\n      "+_vm._s(color)+" \n    ")])})],2),_vm._v(" "),_c('p',[_c('label',[_vm._v("\n      Inline:\n      "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.isInline),expression:"isInline"}],attrs:{"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.isInline)?_vm._i(_vm.isInline,null)>-1:(_vm.isInline)},on:{"change":function($event){var $$a=_vm.isInline,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.isInline=$$a.concat([$$v]));}else {$$i>-1&&(_vm.isInline=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.isInline=$$c;}}}})])]),_vm._v(" "),_c('div',{staticClass:"text-center p-1",style:(_vm.backgroundStyle)},[_c('gl-loading-icon',{staticClass:"p-1",attrs:{"size":_vm.selectedSize,"color":_vm.selectedColor,"inline":_vm.isInline}}),_vm._v("Loading...\n  ")],1)])};
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__ = __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 default __vue_component__;