Navigation Bar

Bài viết này sẽ hướng dẫn các bạn làm một header cho page với nội dung được fixed on top kèm theo animation khi scroll page

I. Giới thiệu các cấu hình Routes

MiniApp Core UI cung cấp bộ Router để cấu hình điều hướng và Navigation Bar (Header). Ví dụ

import { Routes, Route } from '@vsf-miniapp/ui-react'

// App.js
return (
  <Routes>
    <Route
      path="/"
      element={<Home />}
      navigationBar={context => ({
        title: 'Home Page',
        backIcon: false,
        rightIcon: <Icon name="UserAddOutline" size={24} />,
        onRightIconClick: () => context.navigate('/user'),
      })}
    />
    <Route
      path="/user"
      element={<User />}
      navigationBar={{
        title: 'User...',
        transparentTitle: 'auto',
        scrollElementSelector: '#scroll-view',
      }}
    />
  </Routes>
)

Với mỗi NavigationBar sẽ có các cấu hình sau

interface INavigationBarProps {
  scrollElementSelector?: (() => HTMLElement) | string
  transparentTitle?: 'auto' | 'always' | 'none'
  theme?: 'default' | 'inverse'
  color?: string
  title?: string | ReactNode
  backIcon?: boolean | ReactNode
  onBackClick?: () => void
  leftIcon?: ReactNode
  onLeftIconClick?: () => void
  left?: ReactNode
  rightIcon?: ReactNode
  rightIconBadge?: number
  onRightIconClick?: () => void
  right?: ReactNode
}

Trong đó transparentTitle là thuộc tính dùng để cấu hình độ transparent (trong suốt) của thanh navigation bar (thanh điều hướng). Khi bạn thiết lập cấu hình này page tương ứng sẽ hiển thị ở cách chế độ khác nhau

• none: Thanh điều hướng sẽ luôn được hiển thị màu sắc, được cấu hình dựa vào trường color (mặt định là màu trắng)
• always: Thanh điều hướng sẽ luôn hiển thị trong suốt
• auto: Màu sắc thanh điều hướng sẽ thay đổi dựa vào vị trí scroll trên màn hình. Nó cần được kết hợp với scrollElementSelector.

Ngoài ra bạn cũng có thể thay đổi thông tin navigation bar tại trang của bạn theo hook sau

import { useNavigationBar } from '@vsf-miniapp/ui-react'

const { setNavigationBar } = useNavigationBar()
// Thay đổi title sau khi load thông tin user thành công
useEffect(() => {
  setNavigationBar({ title: 'Loading...' })
  loadUser().then(user => {
    setNavigationBar({ title: `User ${user.name}` })
  })
}, [setNavigationBar])

Lưu ý

• setNavigationBar có thể thay đổi tất cả thông tin được cấu hình trong Route.navigationBar
• Bạn cần config "transparentTitle": "always” tại file app-config.json để loại bỏ navigation bỏ mặt định của ứng dụng

II. Kết hợp cấu hình transparentTitle và scrollElementSelector

Kết hợp cấu hình transparentTitle và scrollElementSelector để tự động thay đổi màu sắc của header khi bạn thay đổi vị trí scroll trên màn hình. Để làm được điểu này, đầu tiên bạn cần đặt 1 id của bạn hoặc lấy Element tương ứng với thanh scroll của bạn

// page.tsx
<div classname="scroll" id="scroll-view">
  ...content
</div>
// Hoặc
const [ref, setRef] = useState()
<div classname="scroll" ref={setRef}>
  ...content
</div>

Sau đó, bạn cần liên kết trong scrollElementSelector

// page.tsx
<Route
  path="/user"
  element={<User />}
  navigationBar={{
    title: "User...",
    transparentTitle: "auto",
    scrollElementSelector: "#scroll-view",
  }}
/>

<div classname="scroll" id="scroll-view">
  ...content
</div>

// Hoặc
const [ref, setRef] = useState()
const { setNavigationBar } = useNavigationBar();
useEffect(() => {
  setNavigationBar({ scrollElementSelector: () => ref });
}, [setNavigationBar, ref]);

<div classname="scroll" ref={setRef}>
  ...content
</div>

III. Kết

Sau bài viết này hy vọng bạn có thể sử dụng navigation bar cho ứng dụng của bạn một cách tốt nhất.