FloatButton 浮动按钮

'use client'

import { useState } from 'react'
import { HelpCircle, Pencil, Plus } from 'lucide-react'
import { FloatButton, Flex, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  const [result, setResult] = useState('悬停或键盘聚焦可以查看操作名称')

  return (
    <Stack align="center" gap="lg">
      <Flex wrap justify="center" gap="lg">
        <FloatButton
          position="static"
          label="新建项目"
          onClick={() => setResult('已选择：新建项目')}
        >
          <Plus />
        </FloatButton>
        <FloatButton
          position="static"
          label="编辑项目"
          variant="soft"
          shape="square"
          onClick={() => setResult('已选择：编辑项目')}
        >
          <Pencil />
        </FloatButton>
        <FloatButton
          position="static"
          label="帮助中心"
          variant="outline"
          tone="neutral"
          onClick={() => setResult('已选择：帮助中心')}
        >
          <HelpCircle />
        </FloatButton>
      </Flex>
      <Text role="status" size="sm" tone="muted">
        {result}
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Plus } from 'lucide-react'
import { FloatButton, Flex, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  const [result, setResult] = useState('文字按钮使用同一高度，宽度随名称展开')

  return (
    <Stack align="center" gap="lg">
      <Flex wrap align="center" justify="center" gap="lg">
        {(['sm', 'md', 'lg'] as const).map(size => (
          <FloatButton
            key={size}
            position="static"
            size={size}
            label={`新建项目（${size}）`}
            onClick={() => setResult(`已选择：${size}`)}
          >
            <Plus />
          </FloatButton>
        ))}
        <FloatButton
          position="static"
          extended
          label="新建项目"
          onClick={() => setResult('已选择：新建项目')}
        >
          <Plus />
        </FloatButton>
      </Flex>
      <Text role="status" size="sm" tone="muted">
        {result}
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Plus } from 'lucide-react'
import { Card, Center, FloatButton, FormField, Stack, Switch, Text } from '@hina-ui/react'

const placements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'] as const

export default function Demo() {
  const [rtl, setRtl] = useState(false)
  const [result, setResult] = useState('start / end 随书写方向切换')

  return (
    <Stack className="w-full max-w-md">
      <FormField label="从右向左" orientation="horizontal">
        <Switch checked={rtl} onCheckedChange={setRtl} />
      </FormField>
      <Card dir={rtl ? 'rtl' : 'ltr'} className="relative h-64" padded={false}>
        <Center className="h-full px-16">
          <Text role="status" size="sm" tone="muted" className="text-center">
            {result}
          </Text>
        </Center>
        {placements.map(placement => (
          <FloatButton
            key={placement}
            position="absolute"
            placement={placement}
            label={placement}
            offset={16}
            variant="soft"
            size="sm"
            onClick={() => setResult(placement)}
          >
            <Plus />
          </FloatButton>
        ))}
      </Card>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { RefreshCw } from 'lucide-react'
import { Center, FloatButton, FormField, Stack, Switch, Text } from '@hina-ui/react'

export default function Demo() {
  const [visible, setVisible] = useState(true)
  const [loading, setLoading] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const [result, setResult] = useState('显示和隐藏带有过渡')

  return (
    <Stack className="w-full max-w-xs">
      <FormField label="显示按钮" orientation="horizontal">
        <Switch checked={visible} onCheckedChange={setVisible} />
      </FormField>
      <FormField label="加载中" orientation="horizontal">
        <Switch checked={loading} onCheckedChange={setLoading} />
      </FormField>
      <FormField label="禁用" orientation="horizontal">
        <Switch checked={disabled} onCheckedChange={setDisabled} />
      </FormField>
      <Center className="h-24">
        <FloatButton
          position="static"
          label="同步资料"
          visible={visible}
          loading={loading}
          disabled={disabled}
          onClick={() => setResult('已执行：同步资料')}
        >
          <RefreshCw />
        </FloatButton>
      </Center>
      <Text role="status" size="sm" tone="muted" className="text-center">
        {result}
      </Text>
    </Stack>
  )
}