Chakra UI Vue 및 팔레트 전환이 있는

우리 Chakra UI Vue의 새로운 재미있는 프로젝트부터 시작합시다!

Vue를 구축합니다.사용자 정의 테마 대상에 정의된 팔레트 사이를 전환할 수 있는 js 프로젝트입니다.
나는 www.canva.com/colors/color-palettes 중에서 다음 항목에서 사용할 수 있도록 팔레트를 선택했다.
시각적으로 이 항목은 예쁜 격자에 표시된 색을 제외하고는 많이 포함되지 않을 것이다.이것이 최종 결과의 모습이다.

자, 우리 시작합시다🚗 Vue CLI 사용 및 새 프로젝트 시작

vue create my-project
# OR
vue ui

몇 초 정도 기다린 후에 Chakra UI Vue를 추가할 수 있습니다.

vue add chakra-ui

하면, 만약, 만약...✨ 나처럼 vue add Chakra UI가 실행되는 동안 펄스 UI 구성 요소의 자동 가져오기를 설정할 수 있습니다.
현재, 우리는 응용 프로그램 내에 깨끗한 프로젝트가 하나 있다.vue.우리는 <c-theme-provide/> 표시와 <c-reset /> 표시가 있는 템플릿을 가지고 있다.
우선, 우리는 그중에 <h1> 을 추가하여 일부 내용에 사용할 것이다.

태그 내의 모든 Chakra UI 구성 요소가 테마 객체에 액세스할 수 있도록 CThemeProvide 구성 요소가 필요합니다.
Creset 구성 요소는 모든 Chakra UI 구성 요소가 정상적으로 작동하도록 필요한 css 재설정 스타일을 제공합니다.
다음 명령을 사용하여 프로젝트를 시작합니다.

yarn serve

🎉 지금까지 잘했어!우리 시간을 좀 내서 이 아름다운 프로젝트를 봅시다!

진정한 작업은 사용자 정의 테마를 추가하는 것부터 시작합니다!💅

assets 폴더에서, 우리는 테마를 위한 새 폴더를 만들었고, 사용자 정의 테마를 위한 Javascript 파일을 만들었습니다.우리는 그것을 우리가 원하는 무엇이라고 부르거나, 지루한, 사용자 정의 테마를 사용할 수 있다.js.
사용자 정의 색상만 사용하기 때문에 테마 대상에 이 색상만 추가합니다.

팔레트를 정의할 때, 우리는 프로젝트에서 나중에 교환할 수 있도록 같은 대상 구조 (primary-1,...,primary-4) 를 유지하는 것을 고려해야 한다.
현재 우리는 새로운 사용자 정의 테마 대상에 예쁜 팔레트가 있습니다. 우리는 사용자 정의 테마로 기본 테마를 확장하고 싶다는 것을 Chakra UI에 알려야 합니다.
도내를 주관하다.확장 테마 옵션에서 사용자 정의 테마 대상을 전달해야 합니다.

이제 사용자 정의 팔레트를 표시하는 격자를 구축합시다!🎉

Charka UI를 깊이 파고들었을 때, 우리는 격자 구축에 사용되는 두 가지 재미있는 구성 요소를 발견했다.단순함을 유지하면서 단순Gridhttps://vue.chakra-ui.com/simplegrid 구성 요소를 사용합니다.

예, 지금 모든 것이 녹색입니다...걱정하지 마라, 이것은 우리가 지금 필요로 하는 것이다!
그래서 이 격자는 4열 전체 화면 높이가 있다.
이제 이 녹색 화면을 변경하고 팔레트를 추가합니다.
우리가 유일하게 바꿔야 할 것은 스타일 아이템 배경이다.만약 당신이 타자를 적게 치는 것을 좋아한다면, 우리는 배경을 배경으로 줄일 수 있습니다.
이 아이템의 가치는 우리의 첫 번째 팔레트에 다음과 같이 추가됩니다.

우리 격자 좀 봅시다. 꼭 신기해 보인다고 해야 돼요. 맞죠?!

전환하시겠습니까?

자, 이제 트레이 사이를 전환할 수 있도록 styleprops 값을 동적으로 변경하는 방법을 봐야 합니다.
우선, 우리는 격자를 배경에 놓고, 그 위에 단추를 놓아서 팔레트를 전환합니다.

지금, 우리는 팔레트 격자 꼭대기에 파란색 단추가 하나 있다.나는 파란색 단추를 화면 중앙에 나타낼 수 있는 다른 방법이 있다고 확신하지만, 이것이 바로 내가 지금 견지하고 있는 방법이다.마음대로 여기에 당신의 실현을 추가하세요!💪
사용자가 이 단추를 눌렀을 때, 새 팔레트로 변경해야 합니다.
템플릿에 @click 명령을 추가하고 새로 추가된 changePalette 방법을 호출했습니다.

이 방법에서, 우리는 우선currentPalette를 다른 것으로 설정합니다. 예를 들어bamboobeach입니다.🐼

만약 우리가 지금 파란색 단추를 누르면currentPalette의 값이 "bamboo Beach"로 변경된 것을 볼 수 있습니다.이제 격자 모양 아이템도 바뀌었음을 확인하자!
이것은currentPalette의 값을 bg 스타일의 도구에 동적으로 귀속시켜 실현할 수 있습니다.

현재 팔레트만 다르기 때문에 문자열 연결을 알 수 있습니다.

재미를 위해서 랜덤으로 팔레트를 고르자!🤪

우선, 우리는 모든 팔레트의 목록을 필요로 하고, 그 중에서 무작위 팔레트를 선택해야 한다.
그리고 우리는 0과 팔레트 목록의 마지막 인덱스 사이의 랜덤 수가 필요합니다. 그러면 우리는 그룹의 랜덤 인덱스에서 팔레트를 선택할 수 있습니다.
누가 같은 팔레트를 두 번 보고 싶습니까?나 아니야!🙅‍♂️ 이런 상황을 피하기 위해서 우리는 반드시 약간의 검사를 추가해야 한다.
랜덤 수가 lastRandom보다 작으면 그대로 사용할 수 있습니다.그렇지 않으면 lastRandom을 건너뛰기 위해 1을 추가해야 합니다.
흥미로운 것은 사용자 정의 테마에 어떤 스타일의 아이템 값을 설정할 수 있다는 것이다.예를 들어 우리는 자신의 흑백 모드를 만들 수 있다.
이제 우리 그 버튼을 깨뜨리고 즐겁게 놀자!🎉

❤️ 이 블로그에 공헌하다

어떤 문제, 오류 또는 힌트가 있습니까?연락 주세요!