Question

我是Angular的新手。我正在做一个项目。我从头开始在/*----- MATERIAL UI -----*/ import Box from "@material-ui/core/Box";... /*----- REACT/ROUTER/REDUX -----*/ import React, { Component, Fragment } from "react"; import { connect } from "react-redux"; // connect component to redux store. /*----- COMPONENTS/ACTIONS -----*/ import Navbar from "../components/Navbar"; import ItininerariesList from "../components/ItinerariesList"; import { loadUser } from "../store/actions/authActions"; import { fetchItinerariesId } from "../store/actions/profileActions"; import { fetchActivities } from "../store/actions/activitiesActions"; class Profile extends Component { componentDidMount() { this.props.loadUser(); let favItin_id = this.props.favItin_id; this.props.fetchItinerariesId(favItin_id); } render() { const { favitineraries, activities } = this.props; return ( <Fragment> <Container maxWidth="sm"> <Typography component="div"> <Box fontSize="h7.fontSize" textAlign="left" mb="3"> Favorites MYtineraries: </Box> <ItininerariesList itineraries={favitineraries} activities={activities} /> </Typography> </Container> <div className="navbar"> <Navbar /> </div> </Fragment> ); } } const mapStateToProps = (state, ownProps) => { return { favItin_id: state.auth.user.favorites, favitineraries: state.profileRed.favItineraries, activities: state.activitiesRed.activities }; }; export default connect(mapStateToProps, { loadUser, fetchItinerariesId, fetchActivities })(Profile);中创建了一个自定义month-picker组件（*因为我不允许外包任何第三方库，甚至没有Angular 6，bootstrap或{{ 1}}），为此，我想要一个简单的文本字段，并在其中显示一个简单的日历图标。我尝试了几种解决方案。 This最相关，但他们使用的是fontawesome。 This也有所不同。 This也不是很有用。这是我的代码。我还创建了CodePen。

timeselector.component.html

primeng

注意： AngularJS是我组织自己的图标库。我不可以超越这个范围。

我在CodePen上尝试this，但对图标使用了一些十六进制代码。无论如何，我可以像这样在输入字段中添加<our-icon class="icon-our-calendar"></our-icon> <input class="input-field" type="text">标签作为占位符：

<our-icon>

我知道这是完全错误的，只是想让您了解我的实际意思。

但是首先我想问一问这是否可行，或者我只是在浪费每个人的时间。请给我一些指导。

Answer 1

这只是一个css问题。将图标和输入视为不同的元素，而不是相互融合。

将position: absolute用作图标，并根据图标的大小应用填充，以便在图标之后开始输入。

CSS

input {
    width: 450px;
    padding: 5px 35px;
    height: 25px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper .input-icon {
  position: absolute;
  padding: 12px;
}

模板

<div class="input-wrapper">
  <app-our-icon class="input-icon"></app-our-icon>
  <input>
</div>

Demo.

我可以使用自定义的Angular组件作为Input字段的占位符吗

1 个答案: