mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Add RTL support
This commit is contained in:
@@ -32,6 +32,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<v-select placeholder="default" :options="options"></v-select>
|
<v-select placeholder="default" :options="options"></v-select>
|
||||||
|
<v-select placeholder="default, RTL" :options="options" :rtl="true" dir="rtl"></v-select>
|
||||||
<v-select placeholder="multiple" multiple :options="options"></v-select>
|
<v-select placeholder="multiple" multiple :options="options"></v-select>
|
||||||
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
|
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
|
||||||
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
|
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
|
||||||
|
|||||||
@@ -9,6 +9,19 @@
|
|||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
/* Rtl support */
|
||||||
|
.v-select.rtl .open-indicator {
|
||||||
|
left: 10px;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
.v-select.rtl .selected-tag {
|
||||||
|
float: right;
|
||||||
|
margin-right: 3px;
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
.v-select.rtl .dropdown-menu {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
/* Open Indicator */
|
/* Open Indicator */
|
||||||
.v-select .open-indicator {
|
.v-select .open-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -517,7 +530,16 @@
|
|||||||
*/
|
*/
|
||||||
inputId: {
|
inputId: {
|
||||||
type: String
|
type: String
|
||||||
}
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets Rtl support.
|
||||||
|
* @type {Boolean}
|
||||||
|
*/
|
||||||
|
rtl: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
@@ -796,7 +818,8 @@
|
|||||||
searching: this.searching,
|
searching: this.searching,
|
||||||
searchable: this.searchable,
|
searchable: this.searchable,
|
||||||
unsearchable: !this.searchable,
|
unsearchable: !this.searchable,
|
||||||
loading: this.mutableLoading
|
loading: this.mutableLoading,
|
||||||
|
rtl: this.rtl
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -806,7 +829,7 @@
|
|||||||
*/
|
*/
|
||||||
clearSearchOnBlur() {
|
clearSearchOnBlur() {
|
||||||
return this.clearSearchOnSelect && !this.multiple
|
return this.clearSearchOnSelect && !this.multiple
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the current state of the
|
* Return the current state of the
|
||||||
|
|||||||
Reference in New Issue
Block a user