salesforce - 在 LWC 中嵌入带有闪电图标的闪电输入
问题描述
有人可以帮助将闪电图标嵌入到LWC中的闪电输入中吗
<lightning-input type="search" name="To Address" label="To"
class="slds-input-has-icon_right slds-m-bottom_small">
<lightning-icon icon-name=action:email>
</lightning-icon>
</lightning-input>
我也尝试了以下方法,但它不起作用
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<lightning-icon icon-name="utility:adduser" size="medium">
</lightning-icon>
<input type="text" id="text-input-id-1" class="slds-input" />
</div>
解决方案
这是解决方案!
<lightning-button-icon class="btnIconOverlay" icon-name="utility:adduser">
</lightning-button-icon>
<lightning-input type="search" name="To Address" value={toAddress}>
</lightning-input>
将以下 CSS 添加到闪电按钮图标中,这有助于覆盖图标。
.btnIconOverlay {
position: absolute;
z-index: 1;
margin: 0.5% 0 0 92%;
}
推荐阅读
- c++ - 传递 std::vector
到外部函数 - javascript - 是什么让 Google Places API 无法在我的 C# 应用程序上自动完成?
- java - ItemWriter 只提交第一个提交间隔
- amazon-web-services - 使用 check/dry-run 开发 AWS 基础设施配置 ansible playbook
- vscode-settings - 在终端中更改 VSCode 错误字体颜色
- javascript - JavaScript 不适用于所有 HTML 页面
- javascript - 在每个循环中使用 setAttributeNS
- javascript - 使用 postgresql 和 pg-promise 在多行插入中找不到关系错误
- sql-server - 如何删除超过30天未登录的sql server数据库
- angular - Angular - 如何添加外键值