Manner Temp
사용자의 매너온도를 온도와 표정 이미지로 표현하는 컴포넌트입니다.
@seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0
import "./styles";
import "./preview.css";
import { MannerTemp, MannerTempEmote, useSeedClassName, VStack } from "@seed-design/lynx-react";
const mannerTemps = [
["l1", "12.5°C"],
["l2", "30°C"],
["l3", "36°C"],
["l4", "36.5°C"],
["l5", "37°C"],
["l6", "40°C"],
["l7", "45°C"],
["l8", "55°C"],
["l9", "65°C"],
["l10", "80°C"],
] as const;
export default function Example() {
const seedClassName = useSeedClassName({ colorMode: "system" });
return (
<view className={`${seedClassName} docs-lynx-manner-temp-root`}>
<VStack
width="full"
height="full"
align="center"
justify="center"
p="x4"
bg="bg.layerDefault"
>
<view className="manner-temp-preview__frame">
<VStack gap="x1" align="flex-end">
{mannerTemps.map(([level, label]) => (
<MannerTemp key={level} level={level}>
{label}
<MannerTempEmote />
</MannerTemp>
))}
</VStack>
</view>
</VStack>
</view>
);
}
npm install @seed-design/lynx-react @seed-design/lynx-css
pnpm add @seed-design/lynx-react @seed-design/lynx-css
yarn add @seed-design/lynx-react @seed-design/lynx-css
bun add @seed-design/lynx-react @seed-design/lynx-css
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
level?MannerTempLevel | undefined
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
level에 매너온도 구간을 지정합니다. MannerTempEmote를 자식으로 넣으면 같은 level의 표정 이미지를 표시합니다.
import { MannerTemp, MannerTempEmote } from "@seed-design/lynx-react";
export function App() {
return (
<MannerTemp level="l4">
36.5°C
<MannerTempEmote />
</MannerTemp>
);
}
- 렌더링 요소. HTML
<span>과 <img> 대신 native <view>, <text>, <image>를 렌더링합니다.
- 공개 경로. React 문서의
ui:manner-temp snippet과 달리 Lynx에서는 패키지 API를 직접 사용합니다.
- 온도 변환. Lynx 패키지는
temperature를 level로 바꾸지 않습니다. 제품의 매너온도 기준에 따라 level을 계산해 전달하세요.
- 다형 렌더링. 웹의
asChild와 HTML attribute 표면은 제공하지 않습니다.