DevExtreme Vue - HTML-Based Components Customization

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

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

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

$(function() {
    $("#listContainer").dxList({
        width: 600
    });
});

<dx-list
    [width]="600">
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

<template>
    <DxList
        :width="600" />
</template>
<script>
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    }
}
</script>

import React from 'react';
import { List } from 'devextreme-react/list';

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

export default App;

@(Html.DevExtreme().List()
    .Width(600)
)

If your page contains multiple instances of the same UI component, 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, UI components provide templates that you can use for more in-depth customization.

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:

• How to inspect CSS rules
• How to implement CSS-related solutions for DevExpress components

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

During the customization, we recommend checking how the UI components 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.