Adornments in EJ2 Vue TextArea control
28 Dec 202521 minutes to read
Adornments allow you to add custom elements before or after the TextArea using the prependTemplate and appendTemplate properties. These elements can include icons, text labels, or action buttons for formatting and content management. With orientation support, you can arrange adornments horizontally or vertically using adornmentFlow and adornmentOrientation for flexible layouts.
Common Use Cases
- Visual Indicators: Icons for context (e.g., edit, comment).
- Formatting Tools: Buttons for bold, italic, underline.
- Content Actions: Save, clear, or submit buttons.
- Validation & Status: Character count or error icons.
- Flexible Layout: Horizontal or vertical adornment flow.
Adding Adornments with Orientation to TextArea
Use prependTemplate and appendTemplate to add custom HTML content before and after the TextArea.
-
prependTemplate: Renders elements before the textarea. -
appendTemplate: Renders elements after the textarea.
You can control how adornments are positioned and arranged using the adornmentFlow and adornmentOrientation properties. Both properties accept only Horizontal or Vertical values defined in the AdornmentsDirection type.
-
adornmentFlow: Defines where adornments appear around the TextArea.- Horizontal: Prepend on the left, append on the right.
- Vertical: Prepend above, append below.
-
adornmentOrientation: Defines how items inside each adornment are arranged.- Horizontal: Items displayed in a row.
- Vertical: Items displayed in a column.
The following example demonstrates how to add adornments with orientation in the TextArea control.
<template>
<div>
<div class="col-lg-8 control-section adornment-textarea">
<div class="content-wrapper">
<div class="multiline-row">
<ejs-textarea
id="iconTextarea"
floatLabelType="Auto"
resizeMode="None"
cssClass="e-outline"
rows="5"
cols="250"
placeholder="Edit the Textarea"
:prependTemplate="'prependTemplate'"
:appendTemplate="'appendTemplate'">
<template v-slot:prependTemplate>
<span class="e-icons e-bold"></span>
<span class="e-input-separator"></span>
<span class="e-icons e-italic"></span>
<span class="e-input-separator"></span>
</template>
<template v-slot:appendTemplate>
<span class="e-input-separator"></span>
<span class="e-icons e-save"></span>
<span class="e-input-separator"></span>
<span class="e-icons e-trash"></span>
</template>
</ejs-textarea>
</div>
</div>
</div>
<div class="col-lg-4 property-section adornment-textarea">
<table id="property" title="Properties" class="multiline-property">
<tr>
<td> Flow Direction </td>
<td>
<ejs-dropdownlist
id="flow-orientation"
:dataSource="flowOrientationData"
:index="index"
:change="handleflowOrientation"
popupHeight="200px">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td> Orientation Direction </td>
<td>
<ejs-dropdownlist
id="orient-orientation"
:dataSource="orientOrientationData"
:index="index"
:change="handleOrientOrientation"
popupHeight="200px">
</ejs-dropdownlist>
</td>
</tr>
</table>
</div>
</div>
</template>
<style>
.adornment-textarea .content-wrapper div.multiline-row {
margin: 0 auto;
padding: 40px 0px 0px;
}
.adornment-textarea.control-section {
padding-top: 0 !important;
}
.adornment-textarea .property-panel-content td {
padding: 10px 0px;
width: 50%;
}
.material3 .adornment-textarea .e-label-bottom,
.material3-dark .adornment-textarea .e-label-bottom {
top: -5px !important;
}
.fluent2 .adornment-textarea .e-label-bottom,
.fluent2-dark .adornment-textarea .e-label-bottom {
top: -10px !important;
}
</style>
<script setup>
import { ref } from 'vue';
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { getComponent } from '@syncfusion/ej2-base';
// Data properties
const flowOrientationData = ref(['Horizontal', 'Vertical']);
const orientOrientationData = ref(['Horizontal', 'Vertical']);
const index = ref(0);
// Methods
const handleflowOrientation = (args) => {
const textAreaObj = getComponent(document.getElementById('iconTextarea'), 'textarea');
textAreaObj.adornmentFlow = args.value;
textAreaObj.appendTemplate = (args.value === 'Horizontal') ?
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
textAreaObj.dataBind();
};
const handleOrientOrientation = (args) => {
const textAreaObj = getComponent(document.getElementById('iconTextarea'), 'textarea');
textAreaObj.adornmentOrientation = args.value;
textAreaObj.appendTemplate = (args.value === 'Horizontal') ?
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
textAreaObj.dataBind();
};
</script><template>
<div>
<div class="col-lg-8 control-section adornment-textarea">
<div class="content-wrapper">
<div class="multiline-row">
<ejs-textarea id="iconTextarea" floatLabelType="Auto" resizeMode="None" cssClass="e-outline" rows="5" cols="250" placeholder="Edit the Textarea" :prependTemplate="'prependTemplate'" :appendTemplate="'appendTemplate'">
<template v-slot:prependTemplate>
<span class="e-icons e-bold"></span>
<span class="e-input-separator"></span>
<span class="e-icons e-italic"></span>
<span class="e-input-separator"></span>
</template>
<template v-slot:appendTemplate>
<span class="e-input-separator"></span>
<span class="e-icons e-save"></span>
<span class="e-input-separator"></span>
<span class="e-icons e-trash"></span>
</template>
</ejs-textarea>
</div>
</div>
</div>
<div class="col-lg-4 property-section adornment-textarea">
<table id="property" title="Properties" class="multiline-property">
<tr>
<td> Flow Direction </td>
<td>
<ejs-dropdownlist id="flow-orientation" :dataSource="flowOrientationData" :index="index" :change="handleflowOrientation" popupHeight="200px"></ejs-dropdownlist>
</td>
</tr>
<tr>
<td> Orientation Direction </td>
<td>
<ejs-dropdownlist id="orient-orientation" :dataSource="orientOrientationData" :index="index" :change="handleOrientOrientation" popupHeight="200px"></ejs-dropdownlist>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { getComponent } from '@syncfusion/ej2-base';
export default {
data: function() {
return {
flowOrientationData: ['Horizontal', 'Vertical'],
orientOrientationData: ['Horizontal', 'Vertical'],
index: 0,
};
},
components: {
'ejs-textarea': TextAreaComponent,
'ejs-dropdownlist': DropDownListComponent
},
mounted: function() {
},
methods: {
handleflowOrientation: function (args) {
var textAreaObj = getComponent(document.getElementById('iconTextarea'), 'textarea');
textAreaObj.adornmentFlow = args.value;
textAreaObj.appendTemplate = (args.value === 'Horizontal') ?
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
textAreaObj.dataBind();
},
handleOrientOrientation: function (args) {
var textAreaObj = getComponent(document.getElementById('iconTextarea'), 'textarea');
textAreaObj.adornmentOrientation = args.value;
textAreaObj.appendTemplate = (args.value === 'Horizontal') ?
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
'<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
textAreaObj.dataBind();
}
}
};
</script>
<style>
.adornment-textarea .content-wrapper div.multiline-row {
margin: 0 auto;
padding: 40px 0px 0px;
}
.adornment-textarea.control-section {
padding-top: 0 !important;
}
.adornment-textarea .property-panel-content td {
padding: 10px 0px;
width: 50%;
}
.material3 .adornment-textarea .e-label-bottom,
.material3-dark .adornment-textarea .e-label-bottom {
top: -5px !important;
}
.fluent2 .adornment-textarea .e-label-bottom,
.fluent2-dark .adornment-textarea .e-label-bottom {
top: -10px !important;
}
</style>You can view the demo here: TextArea Adornments demo.