MobileHeader

一个具有后退导航、标题和操作按钮的响应式移动端标题组件。

导入

import { MobileHeader } from '@xcloud/ui-mobile'

基础用法

import { MobileHeader } from '@xcloud/ui-mobile'

function Page() {
  return (
    <MobileHeader title="Page Title" />
  )
}

带有后退按钮

import { MobileHeader } from '@xcloud/ui-mobile'
import { useNavigate } from '@tanstack/react-router'

function Page() {
  const navigate = useNavigate()

  return (
    <MobileHeader
      title="Details"
      showBack
      onBack={() => navigate({ to: '..' })}
    />
  )
}

带有操作按钮

import { MobileHeader } from '@xcloud/ui-mobile'
import { Search, MoreVertical } from 'lucide-react'

function Page() {
  return (
    <MobileHeader
      title="Messages"
      actions={[
        { icon: Search, onClick: () => console.log('Search') },
        { icon: MoreVertical, onClick: () => console.log('More') }
      ]}
    />
  )
}

属性

属性	类型	默认值	描述
title	string | ReactNode	必需	标题文本或组件
showBack	boolean	false	显示后退按钮
onBack	() => void	-	后退按钮点击处理器
actions	HeaderAction[]	-	右侧操作按钮
className	string	-	附加的 CSS 类
style	CSSProperties	-	内联样式
transparent	boolean	false	透明背景
fixed	boolean	true	固定定位

HeaderAction 类型

interface HeaderAction {
  icon: LucideIcon
  onClick: () => void
  label?: string
  disabled?: boolean
}

样式

.mobile-header {
  --header-height: 56px;
  --header-bg: #ffffff;
  --header-text-color: #000000;
  --header-border-color: #e5e7eb;
}