사용자가 선택하거나 실행할 수 있는 짧은 값을 표시하는 컴포넌트입니다.
import "./styles" ; import { root } from "@lynx-js/react" ; import { Chip, useSeedClassName } from "@seed-design/lynx-react" ; function Root () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < page className = {seedClassName}> < view className = "chip-preview" > < view className = "chip-preview__row" > < Chip.Button > < Chip.Label >Button Chip</ Chip.Label > </ Chip.Button > < Chip.Toggle defaultChecked > < Chip.Label >Toggle Chip</ Chip.Label > </ Chip.Toggle > </ view > < Chip.RadioRoot defaultValue = "first" > < view className = "chip-preview__row" > < Chip.RadioItem value = "first" variant = "outlineStrong" > < Chip.Label >Radio 1</ Chip.Label > </ Chip.RadioItem > < Chip.RadioItem value = "second" variant = "outlineStrong" > < Chip.Label >Radio 2</ Chip.Label > </ Chip.RadioItem > </ view > </ Chip.RadioRoot > </ view > </ page > ); } root. render (< Root />);
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
bindtap?EventHandler < BaseTouchEvent < Target >> | undefined
main-thread:bindtap?EventHandler < BaseTouchEvent < Element >> | undefined
checked?boolean | undefined
defaultChecked?boolean | undefined
onCheckedChange?(( checked : boolean ) => void ) | undefined
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
bindtap?EventHandler < BaseTouchEvent < Target >> | undefined
main-thread:bindtap?EventHandler < BaseTouchEvent < Element >> | undefined
value?string | undefined
defaultValue?string | undefined
disabled?boolean | undefined
onValueChange?(( value : string ) => void ) | undefined
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
valuestring
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
bindtap?EventHandler < BaseTouchEvent < Target >> | undefined
main-thread:bindtap?EventHandler < BaseTouchEvent < Element >> | undefined
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
일반 액션은 Chip.Button을 사용하고 bindtap으로 탭 이벤트를 처리합니다.
import "./styles" ; import { root } from "@lynx-js/react" ; import { Chip, useSeedClassName } from "@seed-design/lynx-react" ; function Root () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < page className = {seedClassName}> < view className = "chip-preview" > < Chip.Button bindtap = {() => console. log ( "필터 열기" )}> < Chip.Label >필터 열기</ Chip.Label > </ Chip.Button > </ view > </ page > ); } root. render (< Root />); 독립적인 선택 상태는 Chip.Toggle을 사용합니다. checked와 onCheckedChange를 함께 전달하면 controlled 상태로 사용할 수 있습니다.
import "./styles" ; import { root } from "@lynx-js/react" ; import { Chip, useSeedClassName } from "@seed-design/lynx-react" ; function Root () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < page className = {seedClassName}> < view className = "chip-preview" > < Chip.Toggle defaultChecked onCheckedChange = {( checked ) => console. log ( "거래 가능" , checked)} > < Chip.Label >거래 가능</ Chip.Label > </ Chip.Toggle > </ view > </ page > ); } root. render (< Root />); 한 항목만 선택해야 하면 Chip.RadioRoot와 Chip.RadioItem을 조합합니다.
import "./styles" ; import { root } from "@lynx-js/react" ; import { Chip, useSeedClassName } from "@seed-design/lynx-react" ; function Root () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < page className = {seedClassName}> < Chip.RadioRoot defaultValue = "recent" onValueChange = {( value ) => console. log ( "정렬" , value)}> < view className = "chip-preview" > < view className = "chip-preview__row" > < Chip.RadioItem value = "recent" > < Chip.Label >최신순</ Chip.Label > </ Chip.RadioItem > < Chip.RadioItem value = "nearby" > < Chip.Label >가까운 순</ Chip.Label > </ Chip.RadioItem > </ view > </ view > </ Chip.RadioRoot > </ page > ); } root. render (< Root />); React 버전과 동일하게 size="small" | "medium" | "large"와 variant="solid" | "outlineStrong" | "outlineWeak"를 지원합니다.
import "./styles" ; import { root } from "@lynx-js/react" ; import { Chip, useSeedClassName } from "@seed-design/lynx-react" ; function Root () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < page className = {seedClassName}> < view className = "chip-preview" > < view className = "chip-preview__row" > < Chip.Button size = "small" variant = "solid" > < Chip.Label >Small</ Chip.Label > </ Chip.Button > < Chip.Button size = "medium" variant = "solid" > < Chip.Label >Medium</ Chip.Label > </ Chip.Button > < Chip.Button size = "large" variant = "solid" > < Chip.Label >Large</ Chip.Label > </ Chip.Button > </ view > < view className = "chip-preview__row" > < Chip.Button variant = "solid" > < Chip.Label >Solid</ Chip.Label > </ Chip.Button > < Chip.Button variant = "outlineStrong" > < Chip.Label >Outline Strong</ Chip.Label > </ Chip.Button > < Chip.Button variant = "outlineWeak" > < Chip.Label >Outline Weak</ Chip.Label > </ Chip.Button > </ view > </ view > </ page > ); } root. render (< Root />); Chip.PrefixIcon, Chip.PrefixAvatar, Chip.SuffixIcon 슬롯으로 앞뒤 콘텐츠를 배치할 수 있습니다. Lynx 아이콘은 @seed-design/lynx-react의 Icon, PrefixIcon, SuffixIcon과 @karrotmarket/lynx-monochrome-icon 요소를 사용합니다. layout="iconOnly"에서는 Icon 자식과 accessibility-label을 함께 전달해야 합니다.
import "./styles" ; import IconChevronRightFill from "@karrotmarket/lynx-monochrome-icon/IconChevronRightFill" ; import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill" ; import { root } from "@lynx-js/react" ; import { Chip, Icon, useSeedClassName } from "@seed-design/lynx-react" ; function Root () { const seedClassName = useSeedClassName ({ colorMode: "system" }); return ( < page className = {seedClassName}> < view className = "chip-preview" > < view className = "chip-preview__row" > < Chip.Button > < Chip.PrefixIcon icon = {< IconPlusFill />} /> < Chip.Label >추가</ Chip.Label > </ Chip.Button > < Chip.Button > < Chip.PrefixAvatar > < view className = "chip-preview__avatar" > < text className = "chip-preview__avatar-label" >A</ text > </ view > </ Chip.PrefixAvatar > < Chip.Label >프로필</ Chip.Label > </ Chip.Button > < Chip.Button > < Chip.Label >다음</ Chip.Label > < Chip.SuffixIcon icon = {< IconChevronRightFill />} /> </ Chip.Button > </ view > < Chip.Button layout = "iconOnly" accessibility-label = "추가" > < Icon icon = {< IconPlusFill />} /> </ Chip.Button > </ view > </ page > ); } root. render (< Root />); Lynx Chip은 React Chip과 같은 Button, Toggle, Radio 구성과 size/variant 이름을 사용하지만 다음 차이가 있습니다.
렌더링 요소 : HTML <button> / <label> / <input> 대신 네이티브 <view> / <text>를 렌더링합니다.이벤트 핸들링 : onClick 대신 bindtap, onChange 대신 onCheckedChange 또는 onValueChange를 사용합니다.상태 스타일 : 웹 pseudo selector 대신 touch 상태와 선택 상태를 Lynx recipe의 pressed, selected variant로 연결합니다.아이콘 렌더링 : SVG currentColor 대신 Lynx monochrome icon과 <image tint-color> 기반 Icon wrapper를 사용합니다.공개 표면 : React의 registry wrapper 역할을 Lynx package API가 직접 제공하므로 별도 snippet을 설치하지 않습니다. 현재 Lynx 런타임 모델 차이로 다음 기능은 지원하지 않습니다.
기능 설명 HiddenInput / inputProps Lynx에 HTML input과 form 제출 모델이 없습니다. name / required / native form valueHTML form 속성을 연결할 대상이 없습니다. raw DOM onChange onCheckedChange 또는 onValueChange로 대체합니다.키보드 focus / focusVisible Lynx에는 웹과 같은 키보드 focus 모델이 없습니다. asChildLynx는 웹 Slot 기반 다형 렌더링을 지원하지 않습니다.