RTL support
RTL support is built in and can be explicitly controlled through the rtl option. If not set, it is inherited from the locale settings.
Explore the different locales Check out this example →
Demo
Enable Right-To-Left rendering
Turn RTL on
<template>
<MbscSelect :rtl="true " />
</template>SFC JSSFC TS
<script setup>
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myData = [
{
text: 'Atlanta',
value: 'atl'
},
{
text: 'Berlin',
value: 'ber'
},
{
text: 'Boston',
value: 'bos'
},
{
text: 'Chicago',
value: 'chi'
},
{
text: 'London',
value: 'lon'
},
{
text: 'Los Angeles',
value: 'la'
},
{
text: 'New York',
value: 'ny'
},
{
text: 'Paris',
value: 'par'
},
{
text: 'San Francisco',
value: 'sf'
}
]
</script>
<template>
<MbscSelect
:rtl="true"
:data="myData"
label="Select"
display="bottom"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
</template>
<script setup lang="ts">
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myData = [
{
text: 'Atlanta',
value: 'atl'
},
{
text: 'Berlin',
value: 'ber'
},
{
text: 'Boston',
value: 'bos'
},
{
text: 'Chicago',
value: 'chi'
},
{
text: 'London',
value: 'lon'
},
{
text: 'Los Angeles',
value: 'la'
},
{
text: 'New York',
value: 'ny'
},
{
text: 'Paris',
value: 'par'
},
{
text: 'San Francisco',
value: 'sf'
}
]
</script>
<template>
<MbscSelect
:rtl="true"
:data="myData"
label="Select"
display="bottom"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
</template>