Vue RadioGroup - Customize Item Appearance
For a minor customization of RadioGroup items, you can define specific fields in item data objects. For example, the following code generates three radio buttons: the first is disabled, the second is not customized, the third is hidden.
- <template>
- <DxRadioGroup :data-source="dataSource"/>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxRadioGroup } from 'devextreme-vue/radio-group';
- export default {
- components: {
- DxRadioGroup
- },
- data() {
- return {
- dataSource: [
- { text: 'Low', disabled: true },
- { text: 'High' },
- { text: 'Urgent', visible: false }
- ]
- };
- }
- }
- </script>
If you need a more flexible solution, define an itemTemplate.
- <template>
- <DxRadioGroup
- :data-source="dataSource"
- item-template="radio">
- <template #radio="{ data }">
- <div>
- <p style="font-size:larger"><b>{{data}}</b></p>
- </div>
- </template>
- </DxRadioGroup>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxRadioGroup } from 'devextreme-vue/radio-group';
- export default {
- components: {
- DxRadioGroup
- },
- data() {
- return {
- dataSource: ['Low', 'Normal', 'Urgent', 'High']
- };
- }
- }
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.