Ant Design 양식에 색상 선택기 추가

16981 단어 antdtypescriptjavascriptreact
이것은 npm 패키지antd-colorpicker에 대한 개요입니다.

Ant design은 효율적인 사용자 인터페이스 구축을 위한 매우 편리한 디자인 시스템입니다.

작업하는 동안 양식에 색상 선택기를 추가해야 할 필요성에 직면했습니다. 불행히도 그러한 구성 요소는 없습니다.
Antd 문서는 colorpicker를 만들기 위해 타사 라이브러리를 사용할 것을 제안합니다.

결국 나는 나와 같은 문제에 직면하게 될 모든 사람을 위해 npm 패키지를 작성하는 것이 도움이 될 것이라고 결정했습니다.

NPM antd-colorpicker




사용 방법?



  • 패키지를 설치합니다:

    npm install antd-colorpicker --save-dev

    또는

    yarn add -D antd-colorpicker



  • Colorpicker 내부의 양식에 Form.Item를 추가합니다.

    • import React from 'react'
import { Button, Form } from 'antd'
import { Colorpicker, ColorPickerValue } from 'antd-colorpicker'

import 'antd/dist/antd.css'

const App = () => {
  const initialValues = { color: { r: 26, g: 14, b: 85, a: 1 } }
  const handleOnFinish = (values: { color: ColorPickerValue }) => {
    console.log(values)
  }

  return (
    <Form onFinish={handleOnFinish} initialValues={initialValues}>
      <Form.Item label={'Colorpicker'} name={`color`}>
        <Colorpicker />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Show values in console
        </Button>
      </Form.Item>
    </Form>
  )
}

export default App


    가장 간단한 색상 선택기가 될 것입니다.

    커스터마이징



    다음 속성을 사용하여 색상 선택기를 사용자 지정할 수 있습니다.


    재산
    설명
    유형
    기본


    이쑤시개
    피커의 종류
    BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker GooglePicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker 견본Picker TwitterPicker
    스케치 선택기

    팝업
    colorpicker에 팝업을 사용하십시오. 구성 요소Popover

    부울
    거짓

    onColorResult
    반환할 색상 값을 변경하는 함수
    기능(색상)
    한정되지 않은

    블록 스타일popup=true인 경우에만 관련이 있습니다. 팝업 창에서 선택한 후 색상을 변경하는 블록용 CSS 스타일
    CSS속성
    { }

    popoverPropsPopover 구성 요소의 속성
    object
    { }

    ...쉬다
    반응 색상 선택기의 사용자 지정 속성
    props




    예



    팝업창




    <Colorpicker popup />




    팝업 창을 실행하는 변경 블록




    <Colorpicker
  popup
  blockStyles={{
    width: '30px',
    height: '30px',
    borderRadius: '50%',
  }}
/>


    13가지 유형의 피커 중 하나를 선택하십시오.



    다음 중 하나를 사용할 수 있습니다. BlockPicker | ChromePicker | CirclePicker | CompactPicker | GithubPicker | GooglePicker | HuePicker | MaterialPicker | PhotoshopPicker | SketchPicker | SliderPicker | SwatchesPicker | TwitterPicker
    <Colorpicker picker={'CirclePicker'} />


    색상의 결과 값 사용자 정의



    기본적으로 다음과 같은 색상 결과가 나타납니다.

    {
  "hsl": {
    "h": 250.3448275862069,
    "s": 0.1594202898550725,
    "l": 0.346725,
    "a": 1
  },
  "hex": "#4f4a67",
  "rgb": {
    "r": 79,
    "g": 74,
    "b": 103,
    "a": 1
  },
  "hsv": {
    "h": 250.3448275862069,
    "s": 0.2750000000000001,
    "v": 0.402,
    "a": 1
  },
  "oldHue": 250.3448275862069,
  "source": "hsv"
}


    원하는 것을 얻기 위해 변경해 봅시다.

    <Colorpicker onColorResult={(color) => color.rgb} />


    결과 값은 다음과 같습니다.

    {
  "r": 79,
  "g": 74,
  "b": 103,
  "a": 1
}



    양식 외부에서 구성 요소를 사용하는 방법은 무엇입니까?


    value 및 onChange (또는 onChangeComplete ) 소품을 정의해야 합니다.

    구성 요소는 다음과 같습니다.

    import React, { useState } from 'react'
import { AnyColorFormat, Colorpicker } from 'antd-colorpicker'

const App = () => {
  const [color, setColor] = useState<AnyColorFormat>({
    r: 0,
    g: 0,
    b: 0,
    a: 0.5,
  })

  const onChange = (color: AnyColorFormat) => {
    setColor(color)
  }

  return (
    <div
      style={{ maxWidth: '500px', margin: '20px auto', paddingBottom: '50px' }}
    >
      <Colorpicker value={color} onChange={onChange} />
    </div>
  )
}

export default App



    이거 야! 즐기다!
    2022년에 작은 웹사이트를 온라인에서 무료로 호스팅하세요
    Java에서 두 개의 Word 문서 비교

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage