diff --git a/P202_HeadUI/code/Header.tsx b/P202_HeadUI/code/Header.tsx new file mode 100644 index 0000000..969cc8d --- /dev/null +++ b/P202_HeadUI/code/Header.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { ConnectButton } from "@ant-design/web3"; +import styles from "./styles.module.css"; + +export default function WtfHeader() { + const pathname = usePathname(); + const isSwapPage = pathname === "/wtfswap"; + + return ( +
+
WTFSwap
+
+ + Swap + + + Pool + +
+
+ +
+
+ ); +} diff --git a/P202_HeadUI/code/styles.module.css b/P202_HeadUI/code/styles.module.css new file mode 100644 index 0000000..d79f885 --- /dev/null +++ b/P202_HeadUI/code/styles.module.css @@ -0,0 +1,29 @@ +.header { + height: 56px; + line-height: 56px; + padding-inline: 24px; + background-color: #e8f1ff; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.title { + font-size: 16px; + font-weight: bold; +} + +.nav { + display: flex; + gap: 64px; +} + +.nav a { + font-size: 14px; + opacity: 0.65; +} + +.nav a.active { + font-weight: bold; + opacity: 1; +} diff --git a/P202_HeadUI/img/ui.png b/P202_HeadUI/img/ui.png new file mode 100644 index 0000000..5463275 Binary files /dev/null and b/P202_HeadUI/img/ui.png differ diff --git a/P202_HeadUI/readme.md b/P202_HeadUI/readme.md new file mode 100644 index 0000000..a8483f8 --- /dev/null +++ b/P202_HeadUI/readme.md @@ -0,0 +1,122 @@ +这一讲，我们来实现 Wtfswap 的 Layout 头部部分的 UI。 + +--- + +设计稿如下所示： + +![headui](./img/ui.png) + +样式比较简单，右侧我们可以使用 Ant Design Web3 的 [ConnectButton](https://web3.ant.design/components/connect-button) 组件，其它部分可以直接用写样式，样式我们基于 [CSSModules](https://nextjs.org/docs/app/building-your-application/styling/css-modules#css-modules) 来写，NextJS 默认支持，而且更好理解，比较适合课程中使用。当然实际项目中你也可以按照你的需求使用[其它方案](https://nextjs.org/docs/app/building-your-application/styling)。 + +我们新建 `components/WtfLayout/styles.module.css`，并初始化部分内容： + +```css +.header { + .title { + } + .nav { + } +} +``` + +稍后我们再来补充相关内容，在这之前先修改 `Header.tsx`： + +```tsx +import Link from "next/link"; +import { ConnectButton } from "@ant-design/web3"; +import styles from "./styles.module.css"; + +export default function WtfHeader() { + return ( +
+
WTFSwap
+
+ Swap + Pool +
+
+ +
+
+ ); +} +``` + +这里用了 [Link](https://nextjs.org/learn-pages-router/basics/navigate-between-pages/link-component) 组件来实现页面的跳转。另外引入了 [ConnectButton](https://web3.ant.design/components/connect-button) 组件，并设置了 `type` 为 `text`，以匹配设计稿的样式。 + +接下来我们继续完善 `styles.module.csss` 中的样式： + +```css +.header { + height: 56px; + line-height: 56px; + padding-inline: 24px; + background-color: #e8f1ff; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.title { + font-size: 16px; + font-weight: bold; +} + +.nav { + display: flex; + gap: 64px; +} + +.nav a { + font-size: 14px; + opacity: 0.65; +} +``` + +接下来我们还要实现高亮当前页面对应的导航的样式，首先我们需要把要高亮的 `Link` 组件添加上一个 `className`： + +```diff +import Link from "next/link"; ++ import { usePathname } from "next/navigation"; +import { ConnectButton } from "@ant-design/web3"; +import styles from "./styles.module.css"; + +export default function WtfHeader() { ++ const pathname = usePathname(); ++ const isSwapPage = pathname === "/wtfswap"; + + return ( +
+
WTFSwap
+
+ + Swap + + + Pool + +
+
+ +
+
+ ); +} +``` + +然后添加相关样式： + +```css +.nav a.active { + font-weight: bold; + opacity: 1; +} +``` + +至此，布局头部的 UI 样式我们就完成了。 diff --git a/README.md b/README.md index 9c56573..e189f7a 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ WTF Dapp 是一个 DApp 极简入门教程，帮助开发者入门去中心应 **第 P201 讲：初始化前端代码和技术分析**：[教程](./P201_InitFrontend/readme.md) | [代码](./P201_InitFrontend/code/) -**第 P202 讲：头部 UI 开发** +**第 P202 讲：头部 UI 开发**：[教程](./P202_HeadUI/readme.md) | [代码](./P202_HeadUI/code/) **第 P203 讲：支持连接链** diff --git a/demo/components/WtfLayout/Header.tsx b/demo/components/WtfLayout/Header.tsx index 731e358..969cc8d 100644 --- a/demo/components/WtfLayout/Header.tsx +++ b/demo/components/WtfLayout/Header.tsx @@ -1,3 +1,32 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { ConnectButton } from "@ant-design/web3"; +import styles from "./styles.module.css"; + export default function WtfHeader() { - return
WtfHeader
; + const pathname = usePathname(); + const isSwapPage = pathname === "/wtfswap"; + + return ( +
+
WTFSwap
+
+ + Swap + + + Pool + +
+
+ +
+
+ ); } diff --git a/demo/components/WtfLayout/styles.module.css b/demo/components/WtfLayout/styles.module.css new file mode 100644 index 0000000..d79f885 --- /dev/null +++ b/demo/components/WtfLayout/styles.module.css @@ -0,0 +1,29 @@ +.header { + height: 56px; + line-height: 56px; + padding-inline: 24px; + background-color: #e8f1ff; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.title { + font-size: 16px; + font-weight: bold; +} + +.nav { + display: flex; + gap: 64px; +} + +.nav a { + font-size: 14px; + opacity: 0.65; +} + +.nav a.active { + font-weight: bold; + opacity: 1; +}