reactを使用したSNS-antdの作成(1)

10867 ワード
テキストリンク
1.antdとstyled-connts
(1)使用端末(据付)
npm i antd styled-components
npm i @ant-design/icons
(2)使用コード
  • は、使用する設計要素(https://ant.design/components/overview/)
    • を組み込む.
    import { Menu } from "antd";
  • の文書を確認し、コード
    • を使用します.
    ...
<Menu mode="horizontal">
  <Menu.Item>
    <Link href="/">
      <a>노드버드</a>
    </Link>
  </Menu.Item>
  <Menu.Item>
    <Link href="/profile">
      <a>프로필</a>
    </Link>
  </Menu.Item>
  <Menu.Item>
    <Link href="/signup">
      <a>회원가입</a>
    </Link>
  </Menu.Item>
</Menu>
...
    2. _app.jsとhead
    (1) _app.jsファイルを使用して共通部分を削除する
  • _app.jsファイルの作成
    pagesフォルダでapp.jsファイルの作成後、入力コード
    • 作成
  • コード
    • import "antd/dist/antd.css";
import PropTypes from "prop-types"; // 안정성을 위함(검증단계)
    const App = ({ Component }) => {
  return <Component />;
};
App.propTypes = {
  Component: PropTypes.elementType.isRequired,
};
export default App;
    =>このように「antd/dist/antd.css」を適用してもスタイルは破壊されません
    (2)headの修正
    Head素子はnextに入れて使用する必要があります!
    作成
  • コード
    • import Head from "next/head";
    ...
<Head>
  <meta charSet="utf-8" />
  <title>NodeBird</title>
</Head>
...
    =>このようにtitleを変更するとタブの名前が変更されます
    3.反転グリッドの使用
    (1)検索ウィンドウの追加
    作成
  • コード
    • import { Menu, Input } from "antd";
    ...
 <Menu.Item>
   <Input.Search enterButton style={{verticalAlign: "middle" }} />
 </Menu.Item>
...
    (2)反転グリッドの追加
    応答型の設計では、移動->タブレット->デスクトップの順に行うことをお勧めします.
    作成
  • コード
    • import { Menu, Input, Row, Col } from "antd";
    ...
<Row gutter={8}> // 컬럼 사이의 간격
  <Col xs={24} md={6}>
    왼쪽 메뉴
  </Col>
  <Col xs={24} md={12}>
    {children}
  </Col>
  <Col xs={24} md={6}>
    <a href="https://velog.io/@dongduu" target="_blank" rel="noreferrer noopener">Made by dongduu</a>
  </Col>
</Row>
...
    =>モバイルデバイス、タブレット、デスクトップのサイズに応じた応答設計
    =>sx、sm、md(antd公式ドキュメントにリストされています)
    =>target="_blank"安定性を確保するためにrel="noreferrer noopener"を常に使用することが要求される
    JSで検索バースポットライトモーダルをつくってください
    vue公式サイト学習ノート(一)紹介