React
Contextual Floating Button
화면 위에 떠 있으며 특정 상황에서만 나타나는 보조적인 동작을 위한 버튼입니다.
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";
export default function ContextualFloatingButtonPreview() {
return (
<ContextualFloatingButton>
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ContextualFloatingButton>
);
}Installation
npx @seed-design/cli@latest add ui:contextual-floating-buttonpnpm dlx @seed-design/cli@latest add ui:contextual-floating-buttonyarn dlx @seed-design/cli@latest add ui:contextual-floating-buttonbun x @seed-design/cli@latest add ui:contextual-floating-button의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:contextual-floating-button
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import {
ContextualFloatingButton as SeedContextualFloatingButton,
type ContextualFloatingButtonProps as SeedContextualFloatingButtonProps,
} from "@seed-design/react";
import * as React from "react";
import { LoadingIndicator } from "./loading-indicator";
export interface ContextualFloatingButtonProps extends SeedContextualFloatingButtonProps {}
/**
* @see https://seed-design.io/react/components/contextual-floating-button
* If `asChild` is enabled, manual handling of `LoadingIndicator` is required.
*/
export const ContextualFloatingButton = React.forwardRef<
React.ElementRef<typeof SeedContextualFloatingButton>,
ContextualFloatingButtonProps
>(({ loading = false, children, ...otherProps }, ref) => {
return (
<SeedContextualFloatingButton ref={ref} loading={loading} {...otherProps}>
{loading && !otherProps.asChild ? <LoadingIndicator>{children}</LoadingIndicator> : children}
</SeedContextualFloatingButton>
);
});
ContextualFloatingButton.displayName = "ContextualFloatingButton";
/**
* 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.
*/
Props
Prop
Type
Examples
Float Composition
Contextual Floating Button은 <Float> 컴포넌트와 함께 사용하면 편리합니다.
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { Box, Float, PrefixIcon } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";
export default function ContextualFloatingButtonFloatComposition() {
return (
<Box
position="relative"
width="300px"
height="500px"
borderWidth={1}
borderColor="stroke.neutralMuted"
>
<Float placement="bottom-center" offsetY="x4">
<ContextualFloatingButton>
<PrefixIcon svg={<IconBellFill />} />
알림 설정
</ContextualFloatingButton>
</Float>
</Box>
);
}Solid Variant
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";
export default function ContextualFloatingButtonSolid() {
return (
<ContextualFloatingButton variant="solid">
<PrefixIcon svg={<IconPlusLine />} />
Solid Variant
</ContextualFloatingButton>
);
}Layer Variant
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";
export default function ContextualFloatingButtonLayer() {
return (
<ContextualFloatingButton variant="layer">
<PrefixIcon svg={<IconPlusLine />} />
Layer Variant
</ContextualFloatingButton>
);
}Icon Only
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { Icon } from "@seed-design/react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";
export default function ContextualFloatingButtonIconOnly() {
return (
<ContextualFloatingButton layout="iconOnly" aria-label="추가">
<Icon svg={<IconPlusFill />} />
</ContextualFloatingButton>
);
}Loading
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { useState } from "react";
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";
export default function ContextualFloatingButtonLoading() {
const [loading, setLoading] = useState(false);
function handleClick() {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
}
// 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
return (
<ContextualFloatingButton loading={loading} onClick={handleClick}>
<PrefixIcon svg={<IconPlusLine />} />
시간이 걸리는 액션
</ContextualFloatingButton>
);
}Last updated on