DevExtreme Vue - HTML-Based Widgets Customization

This article describes ways to customize HTML-based widgets. A similar article on SVG-based widgets is also available. If you do not know whether your widget is HTML- or SVG-based, refer to HTML- and SVG-Based Widgets.

Widgets API

We recommend customizing a widget using its API. Unlike CSS classes, the API is changed rarely, and if it happens, the widget populates the browser console with warnings that help you mend your code.

Each widget has an API described in the widget's API reference section. For example, you can specify the widget's width via a corresponding option. In the following example, this option is set for the List widget.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        width: 600
    });
});
Angular
HTML
TypeScript
<dx-list
    [width]="600">
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
<template>
    <DxList
        :width="600" />
</template>
<script>
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    }
}
</script>
React
import React from 'react';
import { List } from 'devextreme-react/list';

class App extends React.Component {
    render() {
        return (
            <List
                width={600}
            />
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().List()
    .Width(600)
)

If your page contains multiple instances of the same widget, you can use the defaultOptions(rule) method to specify a default configuration for all of them in one place. The same method allows you to specify different default configurations for different devices.

In addition, widgets provide templates that you can use for more in-depth customization.

Individual CSS Classes

Because DevExtreme components consist of standard HTML elements (<div>, <td>, <tr>, and so on), you can use CSS classes to customize them.

A number of classes are documented. However, in most cases, you need to inspect the HTML markup to determine and override the applied CSS classes. The following articles describe how you can do it:

Classes can be added to the widget element in the markup using the class attribute as usual. If it is not possible to change the markup, use the widget's elementAttr option for the same purpose.

NOTE
The internal CSS structure may be changed between releases without notice. Taking that into account, we recommend customizing widgets using their API instead of CSS if it is possible because you will be notified if the API is changed.

During the customization, we recommend checking how the widgets page will look on different devices by viewing them in responsive design mode. Refer to the articles for Google Chrome, Firefox, or Microsoft Edge for information on how to enter this mode in the browser.