Text box component with suffix
Magento use ui component with suffix in product form for weight.
Following example shows how to use the suffix for a text ui component.
In xml
<field name="duration" formElement="input" component="Vasan_Bidding/js/form/components/duration">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">milestone</item>
</item>
</argument>
<settings>
<elementTmpl>Vasan_Bidding/form/element/duration_input</elementTmpl>
<dataType>text</dataType>
<visible>true</visible>
<dataScope>duration</dataScope>
<label translate="true">Duration</label>
</settings>
</field>
In JS file
define([
'Magento_Ui/js/form/element/abstract'
], function (Element) {
'use strict';
return Element.extend({
defaults: {
suffix_text: 'minutes'
}
});
});
In html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="admin__control-addon">
<input class="admin__control-text" type="text"
data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled,
maxlength: 255
}"/>
<label class="admin__addon-suffix" data-bind="attr: { for: uid }"><span data-bind="text: suffix_text"></span></label>
</div>
Posted by vasan to vasan's deck (2022-03-24 17:50)