Templating

By default the select takes the item.text and item.value of the data array items and populates the select. Besides the basic text/value interpretation you can write custom templates to render any custom markup as a scrollable list.

With the help of the item template you can write a custom template where any data field can be used. You'll also want to make sure that the itemHeight is set accordingly.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Code

View code on GitHub 
<script setup>
import { MbscSelect, setOptions  } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myData = ref([
  {
    text: 'Mercury – Act 1',
    year: '2021',
    artist: 'Imagine Dragons',
    value: '56243',
    img: 'Mercury_Act_1'
  },
  {
    text: 'Divide',
    year: '2017',
    artist: 'Ed Sheeran',
    value: '18659',
    img: 'Divide'
  },
  {
    text: 'Evolution',
    year: '2018',
    artist: 'Disturbed',
    value: '88459',
    img: 'Evolution'
  },
  {
    text: 'Future Nostalgia',
    year: '2020',
    artist: 'Dua Lipa',
    value: '65422',
    img: 'Future_Nostalgia'
  },
  {
    text: 'Blue Banisters',
    year: '2021',
    artist: 'Lana Del Rey',
    value: '67111',
    img: 'Blue_Banisters'
  },
  {
    text: 'Human',
    year: '2021',
    artist: 'OneRepublic',
    value: '60589',
    img: 'Human'
  },
  {
    text: 'Kamikaze',
    year: '2018',
    artist: 'Eminem',
    value: '42122',
    img: 'Kamikaze'
  },
  {
    text: 'Simulation Theory',
    year: '2018',
    artist: 'Muse',
    value: '80040',
    img: 'Simulation_Theory'
  },
  {
    text: 'The Nothing',
    year: '2019',
    artist: 'Korn',
    value: '46611',
    img: 'Nothing'
  }
])
</script>

<template>
  <MbscSelect
    :data="myData"
    :itemHeight="64"
    label="Albums"
    display="anchored"
    inputStyle="box"
    labelStyle="stacked"
    placeholder="Please select..."
  >
    <template #item="item">
      <div class="md-item-template">
        <img
          class="md-item-template-img"
          :src="'https://img.mobiscroll.com/demos/' + item.data.img + '.png'"
          alt="Cover"
        />
        <div class="md-item-template-title">
          <span>{{ item.data.text }}</span>
          <span class="md-item-template-year">{{ ' (' + item.data.year + ')' }}</span>
        </div>
        <div class="md-item-template-artist">{{ 'by ' + item.data.artist }}</div>
      </div>
    </template>
  </MbscSelect>
</template>

<style>
.md-item-template {
  padding: 10px 10px 10px 54px;
  position: relative;
  text-align: left;
  line-height: normal;
}

.md-item-template-img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 4px;
}

.md-item-template-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}

.md-item-template-artist {
  font-size: 14px;
  opacity: 0.8;
  line-height: 20px;
}

.mbsc-scroller-wheel-item-2d .md-item-template {
  transform: scale(1.05);
}
</style>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.