带有圆形中心按钮的页脚 UI

Posted 2023-02-22

【中文标题】带有圆形中心按钮的页脚 UI

【英文标题】：Footer UI with Circle center button

【发布时间】：2021-10-05 09:03:06

【问题描述】：

我在将按钮置于页脚中心时遇到问题。我在左右两侧有两个图标，我可以创建 UI，但它看起来不一样（中心图标有点奇怪，带有填充和阴影）。我正在使用material-ui。这是我想要创建的图片：

这是代码沙盒 URL： https://codesandbox.io/s/footer-mobile-responsive-icvvs?file=/src/App.js

组件代码：

<AppBar position="fixed" className="footer__app-bar">
    <Toolbar disableGutters className="footer__toolbar">
      <Link href="/">
        <div className="footer__home">
          <img src=HomeIcon  />
          <div className="footer__home-title">HOME</div>
        </div>
      </Link>

      <Link href="/book">
        <>
          <div className="footer__book-fab-container">
            <Fab aria-label="book">
              <img src=CalendarIcon  />
            </Fab>
          </div>
          <div className="footer__book-title">BOOK</div>
        </>
      </Link>

      <Link href="/profile">
        <div className="footer__profile">
          <img src=ProfileIcon  />
          <div className="footer__profile-title">PROFILE</div>
        </div>
      </Link>
    </Toolbar>
  </AppBar>

样式：

.footer__app-bar 
background-color: $color-white;
color: $color-black;
top: auto;
bottom: 0;
box-shadow: 0px -5px 23px -5px rgba(0, 0, 0, 0.17);
font-family: AvenirNext;
padding: 0px 35px 0px;
.footer__toolbar 
  display: flex;
  align-items: center;
  justify-content: space-between;
  .footer__home 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img 
      width: 18px;
      height: 19px;
    
    .footer__home-title 
    
  
  .footer__book-fab-container 
    position: absolute;
    z-index: 1;
    top: -28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 10px solid white;
    width: 76px;
    border-radius: 50%;
    box-shadow: 0px -5px 23px -5px rgb(0 0 0 / 17%);
    img 
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      margin: 0 auto;
    
    .footer__book-title 
    
  
  .footer__profile 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    img 
      width: 15px;
      height: 20px;
    
    .footer__profile-title 
    
  

如何创建完全相同的用户界面？

【问题讨论】：

您能否为您的用例创建一个 plnkr。以便我们检查并提出解决方案。 plnkr.co

@abhinav3414 我已经添加了代码沙箱URL

【参考方案1】：

我已经做了一些工作并试图实现上面的图像。 您可以从下面替换您的 css 和容器代码并检查。 CSS：

.footer__app-bar 
  // margin: 20px;
  background-color: white;
  color: black;
  top: auto;
  bottom: 0;
  box-shadow: 0px -5px 23px -5px rgba(0, 0, 0, 0.17);
  font-family: AvenirNext;
  padding: 0px 35px 0px;
  height: 80px;
  .footer__toolbar 
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .footer__home 
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img 
        width: 18px;
        height: 19px;
      
      .footer__home-title 
       
      
    
    .footer__book-fab-container-dummy 
      box-shadow: 1px -3px 23px 3px rgb(0 0 0 / 17%);
      height: 26px;
      width: 65px;
      z-index: -8;
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;
      position: absolute;
      top: -47px;
      left: 290px;
      background: transparent;
    

    .footer__book-fab-container 
      height: 43px;
      width: 84px;
      border-top-left-radius: 90px;
      border-top-right-radius: 90px;

      top: -52px;
      background: WHITE;
      position: absolute;
      .MuiFab-root 
        position: absolute;
        top: 14px;
        left: 14px;
      
      img 
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        margin: 0 auto;
      
     
    

    
  .footer__book-fab-container:before,
    .footer__book-fab-container:after 
        content: "";
        position: absolute;
        height: 10px;
        width: 20px;
        bottom: 0;
    

    .footer__book-fab-container:after 
        right: -20px;
        border-radius: 0 0 0 10px;
        -moz-border-radius: 0 0 0 10px;
        -webkit-border-radius: 0 0 0 10px;

        -webkit-box-shadow: -10px 0 0 0 #fff;
        box-shadow: -10px 0 0 0 #fff;
    

    .footer__book-fab-container:before 
        left: -20px;

        border-radius: 0 0 10px 0;
        -moz-border-radius: 0 0 10px 0;
        -webkit-border-radius: 0 0 10px 0;

        -webkit-box-shadow: 10px 0 0 0 #fff;
        box-shadow: 10px 0 0 0 #fff;
  
  

    .footer__book-title 
      margin: 20px 0 0 20px;
    
    .footer__profile 
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img 
        width: 15px;
        height: 20px;
      
      .footer__profile-title 
      
    
  

html：

  <div className="App">
      <AppBar position="fixed" className="footer__app-bar">
        <Toolbar disableGutters className="footer__toolbar">
          <div className="footer__home">
            <img src=HomeIcon />
            <div className="footer__home-title">HOME</div>
          </div>

          <div>
            <div className="footer__book-fab-container-dummy">
            </div>
            <div className="footer__book-fab-container">
              <Fab aria-label="book">
                <img src=CalendarIcon  />
              </Fab>
            </div>
            <div className="footer__book-title">BOOK</div>
          </div>

          <div className="footer__profile">
            <img src=ProfileIcon  />
            <div className="footer__profile-title">PROFILE</div>
          </div>
        </Toolbar>
      </AppBar>
    </div>

Codepen link