React:从头开始创建全屏搜索覆盖

这篇动手操作、字少、代码丰富的文章将引导您完成在 React 中创建全屏搜索覆盖的完整示例。我们将使用钩子和纯 CSS 从头开始​​构建所有内容。不需要第三方库。

例子

应用预览

我们要制作的小演示有一个蓝色按钮(在实际项目中,它通常放置在导航栏上)。单击此按钮时,将显示具有半透明深色背景的全屏模式。全屏搜索不会突然出现,而是会从左侧柔顺地展开,直到达到完整大小。右上角有一个白色的关闭按钮 (X),用于关闭覆盖模式。

React:从头开始创建全屏搜索覆盖

代码

  1. 初始化一个全新的 React 项目:
npx create-react-app kindacode-search-overlay-example

项目名称完全由您决定。选择你喜欢的任何东西。

2. src/App.js中的完整源代码及解释:

// KindaCode.com
// src/App.js
import { useRef } from 'react';
import './App.css';

function App() {
  // This ref will be connected to the overlay div
  const overlayRef = useRef();

  // This function is called when the "Start Searching" button gets clicked
  const openSearch = () => {
    overlayRef.current.style.width = '100%';
  };

  // This function is called when the "Close" button is clicked
  const closeSearch = () => {
    overlayRef.current.style.width = '0%';
  };

  return (
    <>
      {/* Main content */}
      <div class='main'>
        <h2>Welcome to KindaCode.com</h2>
        <h4>Fullscreen Search Overlay: An Example</h4>
        <p>
          The overlay will ternderly move from the left side until it fills the
          screen
        </p>
        <button onClick={openSearch} className='open-button'>
          Start Searching
        </button>
      </div>

      {/* The search overlay */}
      <div ref={overlayRef} class='overlay'>
        <button class='close-button' onClick={closeSearch}>
          &times;
        </button>
        <div class='overlay-content'>
          <form>
            <input
              type='search'
              placeholder='Search KindaCode.com...'
              className='search-input'
            />
            <button
              className='search-button'
              onClick={() => {
                console.log('Hi there');
                /* Your search logic here */
              }}
            >
              Go
            </button>
            <p className='search-text'>
              Enter your keyword into the search box
            </p>
          </form>
        </div>
      </div>
    </>
  );
}

export default App;
  1. CSS 是我们应用中不可或缺的一部分。删除src/App.css中的所有默认代码,然后添加以下内容:
.main {
  width: 80%;
  margin: 40px auto;
}

/* Style the overlay */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  transition: 0.5s;
  overflow-x: hidden;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

/* Style the open button */
.open-button {
  margin-top: 30px;
  padding: 10px 30px;
  background: #2196f3;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 10px;
}

.open-button:hover {
  background: #0b7dda;
}

/* Style the "Close" button */
.close-button {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #fff;
}

/* Style search elements */
.search-input {
  width: 400px;
  padding: 12px 15px;
  border: none;
  outline: none;
  border-radius: 30px 0px 0px 30px;
}

.search-button {
  padding: 12px 15px;
  border: none;
  cursor: pointer;
  background: #ffc107;
  border-radius: 0px 30px 30px 0px;
  transition: 0.3s;
}

.search-button:hover {
  background: #ff9800;
}

.search-text {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}
  1. 在开发模式下运行您的应用程序:
npm start

并转到 http://localhost:3000 查看结果。尝试修改代码,添加一些东西,删除一些东西,更改一些 CSS 值,看看接下来会发生什么。

结论

您已经学习了如何在 React 中从头开始实现全屏搜索框。许多现代 Web 应用程序使用这种设计来节省空间并增加用户体验。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:从头开始创建全屏搜索覆盖