Floating Action Button 화면 위에 떠 있으며 주요 액션을 실행하는 버튼입니다.
@seed-design/lynx-react@0.8.0, @seed-design/lynx-css@0.12.0
import "./styles" ; import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine" ; import { useSeedClassName } from "@seed-design/lynx-react" ; import { FloatingActionButton } from "@/components/ui/floating-action-button" ; export default function Example () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < view className = { `${ seedClassName } docs-lynx-floating-action-button-root` }> < view className = "floating-action-button-preview" > < FloatingActionButton icon = {< IconPlusLine />} label = "Example FAB" /> </ view > </ view > ); }
npx @seed-design/cli@latest add ui:floating-action-button pnpm dlx @seed-design/cli@latest add ui:floating-action-button yarn dlx @seed-design/cli@latest add ui:floating-action-button bun x @seed-design/cli@latest add ui:floating-action-button 의존성 설치
npm install @seed-design/lynx-react yarn add @seed-design/lynx-react pnpm add @seed-design/lynx-react bun add @seed-design/lynx-react 아래 코드를 복사 후 붙여넣고 사용하세요 /** * @file ui:floating-action-button * @requires @seed-design/lynx-react@>=0.8.0 <1.0.0 * @requires @seed-design/lynx-css@>=0.12.0 <1.0.0 **/ import * as React from "@lynx-js/react" ; import { FloatingActionButton as SeedFloatingActionButton } from "@seed-design/lynx-react" ; export interface FloatingActionButtonProps extends Omit < SeedFloatingActionButton . RootProps , "children" > { icon : SeedFloatingActionButton . IconProps [ "icon" ]; label : string ; } /** * @see https://seed-design.io/lynx/components/floating-action-button */ export const FloatingActionButton = React. forwardRef < unknown , FloatingActionButtonProps >( ({ icon , label , "accessibility-label" : accessibilityLabel , ... otherProps }, ref ) => { return ( < SeedFloatingActionButton.Root ref = {ref} accessibility-label = {accessibilityLabel ?? label} { ... otherProps} > < SeedFloatingActionButton.Icon icon = {icon} /> < SeedFloatingActionButton.Label >{label}</ SeedFloatingActionButton.Label > </ SeedFloatingActionButton.Root > ); }, ); FloatingActionButton.displayName = "FloatingActionButton" ; /** * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages. * You can extend this snippet however you want. */ iconReact.ReactElement < LynxIconElementProps, string | React.JSXElementConstructor < any >>
labelstring
bindtap?EventHandler < BaseTouchEvent < Target >> | undefined
main-thread:bindtap?EventHandler < BaseTouchEvent < Element >> | undefined
style?CSSProperties | undefined
className?string | undefined
FloatingActionButton은 Lynx package의 Root, Icon, Label을 조합합니다. label은 필수이며, 기본으로 Root의 accessibility-label에도 사용됩니다. extended는 기본값이 true입니다.
import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine" ; import { FloatingActionButton } from "@/components/ui/floating-action-button" ; function handleTap () { "background only" ; // 새 글 작성 동작을 처리합니다. } export function NewPostButton () { return ( < FloatingActionButton icon = {< IconPlusLine />} label = "새 글 작성" bindtap = {handleTap} /> ); } extended={false}이면 label은 화면에서 숨겨지고 56×56px 아이콘 버튼으로 표시됩니다. 이때도 label은 Root의 접근성 이름으로 남습니다. 다른 설명이 필요하면 accessibility-label을 직접 지정하세요.
extended prop으로 label 표시와 레이아웃을 전환할 수 있습니다. 기본값은 true입니다.
import "./styles" ; import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine" ; import { useState } from "@lynx-js/react" ; import { Box, VStack, useSeedClassName } from "@seed-design/lynx-react" ; import { FloatingActionButton } from "@/components/ui/floating-action-button" ; import { Switch } from "@/components/ui/switch" ; export default function Example () { const [ extended , setExtended ] = useState ( true ); function handleCheckedChange ( checked : boolean ) { "background only" ; setExtended (checked); } const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < view className = { `${ seedClassName } docs-lynx-floating-action-button-root` }> < VStack height = "full" align = "center" justify = "space-between" > < Box width = "full" height = "100px" display = "flex" alignItems = "center" justifyContent = "center" > < FloatingActionButton icon = {< IconPlusLine />} label = "Extended" extended = {extended} /> </ Box > < Switch size = "16" tone = "neutral" label = "Extended" checked = {extended} onCheckedChange = {handleCheckedChange} /> </ VStack > </ view > ); } Lynx에는 React의 <Float> 컴포넌트가 없습니다. 위치 기준 Box에 position="relative"를 지정하고, 버튼 wrapper에 position="absolute", right, bottom을 적용해 같은 배치를 구성하세요.
import "./styles" ; import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill" ; import { Box, useSeedClassName } from "@seed-design/lynx-react" ; import { FloatingActionButton } from "@/components/ui/floating-action-button" ; export default function Example () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < view className = { `${ seedClassName } docs-lynx-floating-action-button-root` }> < view className = "floating-action-button-preview" > < Box position = "relative" width = "300px" height = "500px" borderWidth = { 1 } borderColor = "stroke.neutralMuted" > < Box position = "absolute" right = "16px" bottom = "16px" > < FloatingActionButton icon = {< IconBellFill />} label = "알림 설정" /> </ Box > </ Box > </ view > </ view > ); }
이벤트 : onClick 대신 native bindtap을 사용합니다. React state를 바꾸는 handler가 wrapper를 거쳐 전달되면 handler 첫 줄에 "background only"를 둡니다.접근성 : aria-label 대신 accessibility-label을 사용합니다. Registry wrapper는 필수 label을 기본 접근성 이름으로 사용하므로 collapsed 상태에서도 이름을 보존합니다.렌더링 : HTML <button> / SVG 대신 native <view> / <text>와 Lynx icon tint를 렌더링합니다. asChild와 DOM button prop은 지원하지 않습니다.부동 배치 : React의 <Float> API는 제공하지 않습니다. 앱의 native absolute layout으로 right와 bottom 위치를 지정하세요. compatibility.lynx.engine의 3.9는 package가 요구하는 @lynx-js/types >=3.9.0 및 Scale Feedback 경로의 최소 Engine 버전입니다. 실제 native host의 실행 버전은 별도로 확인하세요.