디자인 시스템 구성 요소

구성 요소를 구축할 때, NEAR VM은 UI 개발을 단순화하기 위해 Radix primitives를 제공합니다.

Radix UI

NEAR VM에서 내장 Radix primitives를 사용하는 것은 단순하고 직관적입니다. 어느 파일도 가져올 필요 없습니다.

return (
    <Label.Root className="LabelRoot">
      Hello World!
    </Label.Root>
);

한계

현재, NEAR VM은 Radix UI 프레임워크에서 몇 가지 한계점을 노출하고 있습니다.

• Form 구성 요소는 사용 불가합니다.
• .Portal 정의를 사용할 수 없습니다.
• CSS 사용법이 조금 다릅니다. styled.div 래퍼를 사용해야 합니다.

CSS 사용

다음은 styled.div 래퍼를 통해 CSS를 사용하는 방법에 대한 예시입니다:

const Wrapper = styled.div`
  .SwitchRoot {
    ...
  }
  .SwitchThumb {
    ...
  }
`;

return (
  <Wrapper>
    <Switch.Root className="SwitchRoot">
      <Switch.Thumb className="SwitchThumb" />
    </Switch.Root>
  </Wrapper>
);

래퍼 사용

Example widget using Wrapper

styled-components 사용

You can use styled-components in combination with Radix UI primitives. 예시는 다음과 같습니다.

const SwitchRoot = styled("Switch.Root")`
  all: unset;
  display: block;
  width: 42px;
  height: 25px;
  background-color: var(--blackA9);
  border-radius: 9999px;
  position: relative;
  box-shadow: 0 2px 10px var(--blackA7);

  &[data-state="checked"] {
    background-color: black;
  }
`;

const SwitchThumb = styled("Switch.Thumb")`
  all: unset;
  display: block;
  width: 21px;
  height: 21px;
  background-color: white;
  border-radius: 9999px;
  box-shadow: 0 2px 2px var(--blackA7);
  transition: transform 100ms;
  transform: translateX(2px);
  will-change: transform;

  &[data-state="checked"] {
    transform: translateX(19px);
  }
`;

return (
  <SwitchRoot>
    <SwitchThumb />
  </SwitchRoot>
);

styled-components 사용

Example widget using styled components to style Radix UI.

Forward references

NEAR VM은 React의 forwardRef를 ref="forwardRef"로 다시 구현합니다.

ref="forwardedRef"를 사용하여 <Widget />를 통해 참조를 전달하여 Radix의 asChild 속성을 지원할 수 있습니다:

Dialog.jsx

<AlertDialog.Trigger asChild>
  <Widget
    src="calebjacob.near/widget/TestButton"
    props={{ label: "Click Me" }}
  />
</AlertDialog.Trigger>

TestButton.jsx

const Button = styled.button`
  background: #f00;
`;

return (
  <Button type="button" ref="forwardedRef">
    {props.label}: Forwarded
  </Button>
);

UI is Near

UI is Near is community-built library offering a comprehensive collection of UI components providing a solid foundation for creating intuitive and visually appealing user interfaces for dApps, wallets or other Web3 solutions.

팁

You can find the documentation, available components, and code examples following this this link.

DIG 구성 요소

These are the Decentralized Interface Guidelines (DIG) components available on the NEAR VM:

• DIG.Accordion
• DIG.Avatar
• DIG.Badge
• DIG.Button
• DIG.Checkbox
• DIG.Chip
• DIG.Dialog
• DIG.DropdownMenu
• DIG.Input
• DIG.InputSearch
• DIG.InputSelect
• DIG.InputTags
• DIG.InputTextarea
• DIG.Tabs
• DIG.Theme
• DIG.Toast
• DIG.Tooltip

팁

If you want to see working demos of these components, check the DIG Overview page.

---

DIG.Accordion

An accordion built with the Radix primitive.

Loading...

DIG.Accordion properties

Click here for properties and details.

---

DIG.Avatar

This component renders an avatar.

Loading...

DIG.Avatar properties

Click here for properties and details.

---

DIG.Badge

This component renders a badge. Badges are not meant to be clickable. Refer to DIG.Button or DIG.Chip for clickable alternatives.

Loading...

DIG.Badge properties

Click here for properties and details.

---

DIG.Button

<button> 또는 <a> 태그 역할을 할 수 있는 완전한 기능을 갖춘 버튼 구성요소입니다

Loading...

DIG.Button 속성

---

DIG.Checkbox

A checkbox built with the Radix primitive.

Loading...

DIG.Checkbox properties

Click here for properties and details.

---

DIG.Chip

A fully featured chip component that can act as a <button> or <a> tag.

Loading...

DIG.Chip properties

Click here for properties and details.

---

DIG.Dialog

This Dialog component is built with the Radix primitive.

Loading...

DIG.Dialog properties

Click here for properties and details.

---

DIG.DropdownMenu

This dropdown menu is built with the Radix primitive.

Loading...

DIG.DropdownMenu properties

Click here for properties and details.

---

DIG.Input

A text input component.

Loading...

DIG.Input properties

Click here for properties and details.

---

DIG.InputSearch

An input component for typing a search query.

Loading...

DIG.InputSearch properties

Click here for properties and details.

---

DIG.InputSelect

A select input component built with the Radix primitive.

Loading...

DIG.InputSelect properties

Click here for properties and details.

---

DIG.InputTags

An input component that handles adding and removing tags.

Loading...

DIG.InputTags properties

Click here for properties and details.

---

DIG.InputTextarea

A textarea input component.

Loading...

DIG.InputTextarea properties

Click here for properties and details.

---

DIG.Tabs

This tabs component is built with the Radix primitive.

Loading...

DIG.Tabs properties

Click here for properties and details.

---

DIG.Theme

This component wraps all of NEAR Components so you don't need to render it yourself.

팁

You can use any of the CSS variables defined inside DIG.Theme.

---

DIG.Toast

This toast component is built with Radix primitive.

Loading...

DIG.Toast properties

Click here for properties and details.

---

DIG.Tooltip

A tooltip built with the Radix primitive.

Loading...

DIG.Tooltip properties

Click here for properties and details.