亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在表單頂部顯示加載指示器?

如何在表單頂部顯示加載指示器?

收到一只叮咚 2023-10-14 18:32:37
我試圖在表單頂部顯示加載指示器(以覆蓋它),但很難做到這一點......我想在單擊垃圾箱/減號或加號時顯示加載指示器。我正在使用 React.js + MobX。我確實有一個布爾標志,但是很難實現將加載指示器實際放置在表單頂部(不破壞樣式......)購物車源代碼:import React, { useEffect, useContext } from "react";import { Container, Row, Col } from "react-bootstrap";import PromotionalCode from "./PromotionalCode";import { observer } from "mobx-react-lite";import { RootStoreContext } from "../../app/stores/rootStore";import CartBody from "./CartBody";import CartSummary from "./CartSummary";import BasicSpinner from "../../app/common/spinners/BasicSpinner";import Section from "../../app/common/Page/Section";import TextContainer from "../../app/common/Page/TextContainer";const Cart = () => {  const rootStore = useContext(RootStoreContext);  const {    cart,    total,    discount,    subtotal,    loadingCart,    loadCartOnSignIn,    loadGuestCart,    isChangingQuantity,  } = rootStore.cartStore;  const { isLoggedIn } = rootStore.userStore;  useEffect(() => {    if (isLoggedIn) {      loadCartOnSignIn();    } else {      loadGuestCart();    }  }, [loadCartOnSignIn, loadGuestCart]);  if (loadingCart)    return (      <div className="mt-5">        <BasicSpinner />      </div>    );  return (    <Section className="checkout p-0">      <TextContainer style={{ padding: "2rem 2rem 0 2rem" }}>        <h2 className="font-weight-bold">Cart</h2>        <p>The competition tickets currently added in the cart.</p>      </TextContainer>      <Container className="cart pt-0">        {loadingCart ? (          <BasicSpinner />        ) 期望的結果是這樣的:
查看完整描述

1 回答

?
臨摹微笑

TA貢獻1982條經驗 獲得超2個贊

您可以對疊加和微調器使用絕對定位。只需將它們呈現在表單內的底部即可。


.form {

  // use relative on your form


  position: relative;

}

.overlay {

  position: absolute;


  // this will stretch overlay to fill width and height of form

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;


  background-color: rgba(0, 0, 0, 0.1); // some transparent grey color

}


.spinner {

  position: absolute;


  // this will place spinner in center of form

  top: 50%;

  left: 50%;


  transform: translate(-50%, -50%);

}


查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 114 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號