Vue LoadIndicator Props
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
- <template>
- <DxLoadIndicator ...
- :element-attr="loadIndicatorAttributes">
- </DxLoadIndicator>
- </template>
- <script>
- import DxLoadIndicator from 'devextreme-vue/load-indicator';
- export default {
- components: {
- DxLoadIndicator
- },
- data() {
- return {
- loadIndicatorAttributes: {
- id: 'elementId',
- class: 'class-name'
- }
- }
- }
- }
- </script>
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
onContentReady
A function that is executed when the UI component is rendered and each time the component is repainted.
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onInitialized
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
- <template>
- <div>
- <DxLoadIndicator ...
- @initialized="saveInstance">
- </DxLoadIndicator>
- </div>
- </template>
- <script>
- import DxLoadIndicator from 'devextreme-vue/load-indicator';
- export default {
- components: {
- DxLoadIndicator
- },
- data: function() {
- return {
- loadIndicatorInstance: null
- };
- },
- methods: {
- saveInstance: function(e) {
- this.loadIndicatorInstance = e.component;
- }
- }
- };
- </script>
- <template>
- <div>
- <DxLoadIndicator ...
- @initialized="saveInstance">
- </DxLoadIndicator>
- </div>
- </template>
- <script setup>
- import DxLoadIndicator from 'devextreme-vue/load-indicator';
- let loadIndicatorInstance = null;
- const saveInstance = (e) => {
- loadIndicatorInstance = e.component;
- }
- </script>
See Also
- Get a UI component Instance in Vue
onOptionChanged
Name | Type | Description |
---|---|---|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
The following example shows how to subscribe to component property changes:
- <template>
- <DxLoadIndicator ...
- @option-changed="handlePropertyChange"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxLoadIndicator from 'devextreme-vue/load-indicator';
- export default {
- components: {
- DxLoadIndicator
- },
- // ...
- methods: {
- handlePropertyChange: function(e) {
- if(e.name === "changedProperty") {
- // handle the property change here
- }
- }
- }
- }
- </script>
rtlEnabled
When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
- DevExpress.config({
- rtlEnabled: true
- });
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
If you have technical questions, please create a support ticket in the DevExpress Support Center.