快速开始

本指南将带你了解如何使用 XCloud UI 组件创建一个简单的移动应用程序。

基础示例

下面是使用核心组件的最小示例：

import { Button, Card } from '@xcloud/ui-core'

function App() {
  return (
    <Card>
      <h2>Welcome to XCloud UI</h2>
      <p>Build beautiful applications with ease.</p>
      <Button onClick={() => alert('Hello!')}>
        Click Me
      </Button>
    </Card>
  )
}

export default App

移动应用程序示例

创建一个带有导航的移动应用：

import { MobileTabbar, MobileHeader, MobilePage } from '@xcloud/ui-mobile'
import { Home, Search, User } from 'lucide-react'

function App() {
  const tabs = [
    { id: 'home', label: 'Home', icon: Home },
    { id: 'search', label: 'Search', icon: Search },
    { id: 'profile', label: 'Profile', icon: User }
  ]

  return (
    <MobilePage>
      <MobileHeader title="My App" />

      <main style={{ padding: '16px' }}>
        <h1>Welcome!</h1>
        <p>Your content goes here.</p>
      </main>

      <MobileTabbar
        tabs={tabs}
        activeTab="home"
        onTabChange={(id) => console.log('Tab changed:', id)}
      />
    </MobilePage>
  )
}

export default App

与 TanStack Router 集成

使用 TanStack Router 进行导航集成：

import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router'
import { MobileTabbar } from '@xcloud/ui-mobile'
import { Home, Search } from 'lucide-react'

// Define routes
const rootRoute = createRootRoute()

const homeRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: HomePage
})

const searchRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/search',
  component: SearchPage
})

// Create router
const router = createRouter({
  routeTree: rootRoute.addChildren([homeRoute, searchRoute])
})

function App() {
  return (
    <RouterProvider router={router}>
      <MobileTabbar
        tabs={[
          { id: 'home', label: 'Home', icon: Home, path: '/' },
          { id: 'search', label: 'Search', icon: Search, path: '/search' }
        ]}
      />
    </RouterProvider>
  )
}

样式

使用 CSS 变量自定义组件：

:root {
  --xcloud-primary: #646cff;
  --xcloud-bg: #ffffff;
  --xcloud-text: #213547;
  --xcloud-border-radius: 8px;
}

.dark {
  --xcloud-bg: #1a1a1a;
  --xcloud-text: #ffffff;
}

下一步

• 探索移动组件
• 浏览核心组件
• 查看API 参考