@ui5 5 web组件:在ui5 5中添加图标-输入无效
@ui5 5 web组件:在ui5 5中添加图标-输入无效
提问于 2022-05-18 17:56:29
只需尝试Input as Search Field示例(您需要向下滚动一点)，但显示图标对我不起作用。
<ui5-input id="searchInput" placeholder="Enter search criteria ..." style="width: 100%">
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>当我将ui5 5-图标移出ui5 5-输入时，图标就会显示出来，但在输入框之外。但是，在这个例子(包括样式和脚本)中，用它的方式来做并不会显示任何图标。
有人知道我可能做错了什么吗？
这就是我在JavaScript包中包含的内容。这几乎是所有可用的东西。所以我希望我没有错过任何事。
在附加的图像中，我可以看到是隐藏在ui5 5输入的右上角(虚线十字)。也许我需要加入更多的css？
import './style.css'
import '@vaadin/app-layout' // don't use, full screen layout only
import '@vaadin/button'
import '@vaadin/icon'
import '@vaadin/icons'
import '@vaadin/menu-bar' // don't know how to use it
import '@vaadin/scroller'
import '@vaadin/split-layout'
import "@ui5/webcomponents/dist/avatar.js";
import "@ui5/webcomponents/dist/avatargroup.js";
import "@ui5/webcomponents/dist/badge.js";
import "@ui5/webcomponents-fiori/dist/bar.js";
import "@ui5/webcomponents-fiori/dist/barcodescannerdialog.js";
import "@ui5/webcomponents/dist/breadcrumbs.js";
import "@ui5/webcomponents/dist/busyindicator.js";
import "@ui5/webcomponents/dist/button.js";
import "@ui5/webcomponents/dist/calendar.js";
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
import "@ui5/webcomponents/dist/Card";
import "@ui5/webcomponents/dist/CardHeader.js";
import "@ui5/webcomponents/dist/carousel.js";
import "@ui5/webcomponents/dist/checkbox.js";
import "@ui5/webcomponents/dist/colorpalette.js";
import "@ui5/webcomponents/dist/colorpicker.js";
import "@ui5/webcomponents/dist/combobox.js";
import "@ui5/webcomponents/dist/datepicker.js";
import "@ui5/webcomponents/dist/daterangepicker.js";
import "@ui5/webcomponents/dist/datetimepicker.js";
import "@ui5/webcomponents/dist/dialog.js";
import "@ui5/webcomponents-fiori/dist/dynamicsidecontent.js";
import "@ui5/webcomponents/dist/fileuploader.js";
import "@ui5/webcomponents-fiori/dist/flexiblecolumnlayout.js";
import "@ui5/webcomponents/dist/icon.js";
import "@ui5/webcomponents-fiori/dist/illustratedmessage.js";
import "@ui5/webcomponents/dist/input.js";
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
import "@ui5/webcomponents/dist/label.js";
import "@ui5/webcomponents/dist/link.js";
import "@ui5/webcomponents/dist/List.js";
import "@ui5/webcomponents/dist/StandardListItem.js";
import "@ui5/webcomponents/dist/CustomListItem.js";
import "@ui5/webcomponents/dist/GroupHeaderListItem.js";
import "@ui5/webcomponents-fiori/dist/MediaGallery";
import "@ui5/webcomponents-fiori/dist/MediaGalleryItem";
import "@ui5/webcomponents/dist/menu.js";
import "@ui5/webcomponents/dist/messagestrip.js";
import "@ui5/webcomponents/dist/multicombobox.js";
import "@ui5/webcomponents/dist/multiinput.js";
import "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";
import "@ui5/webcomponents-fiori/dist/NotificationAction.js";
import "@ui5/webcomponents-fiori/dist/NotificationListItem.js";
import "@ui5/webcomponents-fiori/dist/page.js";
import "@ui5/webcomponents/dist/panel.js";
import "@ui5/webcomponents/dist/popover.js";
import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";
import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";
import "@ui5/webcomponents/dist/progressindicator.js";
import "@ui5/webcomponents/dist/radiobutton.js";
import "@ui5/webcomponents/dist/rangeslider.js";
import "@ui5/webcomponents/dist/ratingindicator.js";
import "@ui5/webcomponents/dist/responsivepopover.js";
import "@ui5/webcomponents/dist/segmentedbutton.js";
import "@ui5/webcomponents/dist/Select";
import "@ui5/webcomponents/dist/Option";
import "@ui5/webcomponents-fiori/dist/shellbar.js";
import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
import "@ui5/webcomponents/dist/slider.js";
import "@ui5/webcomponents/dist/splitbutton.js";
import "@ui5/webcomponents/dist/stepinput.js";
import "@ui5/webcomponents/dist/switch.js";
import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents/dist/Tab";
import "@ui5/webcomponents/dist/TabSeparator";
import "@ui5/webcomponents/dist/Table.js";
import "@ui5/webcomponents/dist/TableColumn.js";
import "@ui5/webcomponents/dist/TableRow.js";
import "@ui5/webcomponents/dist/TableCell.js";
import "@ui5/webcomponents/dist/textarea.js";
import "@ui5/webcomponents/dist/timepicker.js";
import "@ui5/webcomponents-fiori/dist/timeline.js";
import "@ui5/webcomponents/dist/title.js";
import "@ui5/webcomponents/dist/toast.js";
import "@ui5/webcomponents/dist/togglebutton.js";
import "@ui5/webcomponents/dist/Tree.js";
import "@ui5/webcomponents/dist/TreeItem.js";
import "@ui5/webcomponents-fiori/dist/UploadCollection.js";
import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";
import "@ui5/webcomponents-fiori/dist/viewsettingsdialog.js";
import "@ui5/webcomponents-fiori/dist/wizard.js";
import "@ui5/webcomponents-icons/dist/AllIcons.js"
import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js";
import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";我正在ASPnet项目中使用它。我发现这个问题只发生在包括Bootstrap的时候。当我注释掉引导带时，图标(放大镜)就会显示出来。
引导和(ui5)网络组件相互干扰吗？
回答 1
Stack Overflow用户
发布于 2022-11-22 16:20:25
我遇到了同样的问题，我在github上打开了一张用于修复ui5 5输入https://github.com/SAP/ui5-webcomponents/issues/6071的票证。
等待一个真正的修复，我得到了一个满意的答案，只需在css代码中添加3行：
ui5-icon {
box-sizing: content-box;
}为了让它看起来更好看，我添加了这个
ui5-icon {
box-sizing: content-box;
border-left: 1px solid #89919A;
}
ui5-icon:hover {
cursor: pointer;
color: #861645;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72293889
复制相关文章
相似问题
腾讯云开发者
