Loading

加载数据时显示动效

基础使用

function App() {
  return (
    <div className="ykui-demo-row">
      <div style={{ width: 800, height: 300}}>
        <Loading>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam atque blanditiis culpa cumque eius est in
                maiores modi odio officia placeat, quia, recusandae rem, repellat soluta totam unde veritatis.
            </p>
        </Loading>
      </div>
    </div>
  );
}

加载提示

text : 加载文字提示

function App() {
  return (
    <div className="ykui-demo-row">
      <div style={{ width: 800, height: 300}}>
        <Loading text='loading...'>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam atque blanditiis culpa cumque eius est in
                maiores modi odio officia placeat, quia, recusandae rem, repellat soluta totam unde veritatis.
            </p>
        </Loading>
      </div>
    </div>
  );
}

children与loading分开

function App() {
  const [loading, setLoading] = useState(true)
  return (
    <div className="ykui-demo-row">
      <div style={{ width: 800, height: 300}}>
        <Loading loading text="loading..." minHeight={200}>
        </Loading>
        {!loading && <div>
          <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam atque blanditiis culpa cumque eius est in
                maiores modi odio officia placeat, quia, recusandae rem, repellat soluta totam unde veritatis.
            </p>
        </div>
        }
      </div>
    </div>
  );
}

Loading API

属性	说明	类型	默认值
loading	是否展示	boolean	true
fullscreen	是否全屏	boolean	false
style	样式	object	--
text	加载的文字	string	--
children	加载结束后的展示内容	ReactChild	--