tt-ui-comp-lib

tt-ui-comp-lib

Project setup in vue3

>> main.js
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import { store } from './store'
import TT_UI_COMP_LIB from "tt-ui-comp-lib"

createApp(App).use(store).use(TT_UI_COMP_LIB, {
    store: store
}).mount('#app')

Font Awesome Usage

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/vue-fontawesome@3.0.0-1

<fa icon="twitter" type="fab" class="classname"></fa>
<fa icon="align-right" class="classname"></fa>

Range Slider Usage

<ttinput-range-slider class="component_margin_size" v-model="rangeMax" :min="10" :max="90" mode="max" :ticks="9" :badge="'or more'" />

Perfect Scrollbar Usage

<ttui-perfect-scrollbar
   ref="ps"
   class="scroll-area"
   :settings="settings"
   @ps-scroll-y="scrollHandle"
   tagname="div"
 >
   <img ref="imgnode" src="https://raw.githubusercontent.com/Trooptravel/tt-ui-comp-lib/HEAD/assets/image1.jpg" width="1280" height="720" />
</ttui-perfect-scrollbar>

data() {
  return {
    settings: {
      maxScrollbarLength: 60,
    },
  };
},

.scroll-area {
  position: relative;
  margin: auto;
  width: 400px;
  height: 300px;
}

More info: https://github.com/mdbootstrap/perfect-scrollbar#options

Incrementer Usage

<ttinput-incrementer v-model="increment" :min="10" :max="90" :model-value="20" />