adminJS 기초 - property (공식 사이트 번역)

property (속성)

속성은 모델 필드의 AdminJS의 표현입니다.

 

 

소개

속성은 모델 필드이 AdminJS 표현입니다. AdminJS에서 사용하는 모든 어댑터는 Property BaseProperty의 확장인을 내보내야 합니다. 이 섹션에서는 리소스 속성의 기본 설정을 재정의 하는 방법과 구성 개체를 사용하여 리소스에 새 속성을 추가하는 방법을 알아봅시다.

 

 

속성 사용자 지정

이 자습서에서는 다양한 속성 옵션 을 사용 하여 속성을 사용자 지정하는 방법에 대해 설명합니다.

 

사용자 지정 속성 만들기

리소스 및 작업 에 무작위로 생성된 그림을 표시하는 리소스에 호출 randomPicture된 새 속성을 추가한다고 가정해 보겠습니다 .UserUserlistshow

 

먼저 이미지를 표시할 사용자 지정 React 구성 요소를 생성해 보겠습니다.

import React from 'react'
import { ShowPropertyProps } from 'adminjs'
import { Box } from '@adminjs/design-system'

const RandomPicture: React.FC<ShowPropertyProps> = (props) => {
  // Picsum generates a random 200x200 photo
  const url = 'https://picsum.photos/200'
  
  return <img src={url} />
}

export default RandomPicture

const UserResource = {
  resource: User,
  options: {
    properties: {
      randomPicture: {
        type: 'string',
        components: {
          list: Components.MyCustomAction, // see "Writing your own Components"
          show: Components.MyCustomAction,
        },
      },
    },
  },
}

모든 속성은 추가로 사용자 정의할 수 있습니다. 이에 대해서는 이 섹션의 뒷부분에서 다룰 것입니다.

 

 

양식의 필드 옆에 도구 설명 표시

양식에 표시하는 필드에 올바르게 입력하기 위해 추가 정보가 필요할 수 있는 경우 description속성 구성에서 옵션을 사용할 수 있습니다. 이 옵션을 사용하면 양식의 레이블 옆에 있는 물음표 아이콘 위로 마우스를 가져간 후 표시될 메시지를 설정할 수 있습니다.

const UserResource = {
  resource: User,
  options: {
    properties: {
      links: {
        description: "User's Linkedin/Github/social profiles links",
      },
    },
  },
}

번역 키를 사용하고 로케일로 번역을 정의할 수도 있습니다.

links: {
  description: "userLinksHint",
},

 

사용자가 선택할 수 있는 사용 가능한 값 정의

선택한 어댑터가 모델에서 enum 값을 로드할 수 있어야 하므로 대부분의 경우 이 작업이 필요하지 않지만 일반 텍스트 입력 대신 필드를 선택하려는 상황이 여전히 있을 수 있습니다. availableValues 옵션을 통해 가능합니다.

const UserResource = {
  resource: User,
  options: {
    properties: {
      gender: {
        availableValues: [
          { value: 'male', label: 'Male' },
          { value: 'female', label: 'Female' },
          { value: 'other', label: 'Other' },
          { value: 'notSay', label: 'Rather not say' },
        ],
      },
    },
  },
}

 

props를 HTML 요소/구성 요소로 전달

AdminJS가 양식 필드를 렌더링하는 데 사용하는 React 구성 요소 또는 HTML 요소에 추가 props를 전달하려는 경우가 있을 수 있습니다. 다음과 같이 props를 사용할 수 있습니다.

const UserResource = {
  resource: User,
  options: {
    properties: {
      bio: {
        type: 'textarea',
        props: {
          rows: 20,
        },
      },
    },
  },
}