Question

      <ion-item  color="transparent" padding="0px">
        <ion-input type="email" placeholder="username"></ion-input>

      </ion-item>

      <ion-item color="transparent" padding="0px" no-lines>
        <ion-input  id="password" type="password"  placeholder="Password"></ion-input>
        <ion-icon name="albums"></ion-icon>
      </ion-item>

我正在使用ionic创建一个登录表单。但是我有一个问题，我想在项目内部设置白色底边框。我的CSS无法正常工作，如果您有任何建议请给我.....谢谢

Answer 1

以下是我的解决方案，不确定是否在所有情况下都可以使用，但至少对于我的项目而言，它可以使用。

解决方案：在离子项目标签中添加import fetch from "isomorphic-fetch"; import { API } from "../config"; // API = http://localhost:3000/ export const getANews = (id) => { return fetch(`${API}/news/${id}`, { method: "GET", }) .then((response) => { return response.json(); }) .catch((err) => console.log(err)); }; export const updateNews = (id) => { return fetch(`${API}/news/${id}`, { method: "POST", headers: { Accept: "application/json", }, }) .then((response) => { return response.json(); }) .catch((err) => console.log(err)); };。

lines="none"

参考：https://ionicframework.com/docs/api/list

注意：它也适用于离子列表。

Answer 2

尝试一下：

<ion-list lines="none">
      <ion-item  color="transparent" padding="0px">
        <ion-input type="email" placeholder="username"></ion-input>

      </ion-item>

      <ion-item color="transparent" padding="0px" no-lines>
        <ion-input  id="password" type="password"  placeholder="Password"></ion-input>
        <ion-icon name="albums"></ion-icon>
      </ion-item>
</ion-list>

OR

.item-inner{
  border-style: unset !important;
}

Answer 3

尝试

<ion-item lines="none" class="remove_inner_bottom"> //here is the border bottom removal code
    <ion-label>
      No Lines Item
    </ion-label>
  </ion-item>

上面的代码没有底部边框

在CSS里面

.remove_inner_bottom{
   --inner-border-width: 0; // this removes the inner border width
}

请找到link，将ass应用于离子项目

如何删除离子中的项目内部边界

3 个答案: