adminJS - UI 커스터마이즈 / css 스타일 덮어쓰기 (공식 사이트 번역)

관리자는 기본 모양으로 제공됩니다. 버전 6.4부터는 기본 스타일을 쉽게 변경할 수 있습니다. 필수 html 태그에 특별한 data-css 속성을 추가했습니다. 그들의 가치는 동적으로 구축되며 리소스, 작업 및 컨테이너에 따라 다릅니다.

 

 

간단한 예

리소스 사용자가 있는 경우 이 양식의 개별 필드뿐만 아니라 전체 양식의 스타일을 지정할 수 있습니다. 이 특정한 경우 양식에는 data-css="users-edit-form"(편집은 작업 이름임)이 있습니다. 필드 비밀번호는 users-edit-password로 태그가 지정됩니다.

 

이 명명 규칙을 통해 모든 리소스, 모든 작업 및 모든 컨테이너의 스타일을 개별적으로 지정할 수 있습니다. 보다 일반적인 속성 선택기를 사용할 수도 있습니다. 예를 들어 [data-css$="edit-form"]은 AdminJS의 모든 양식에 스타일을 지정합니다.

 

 

구성

먼저 AdminJS가 정적 파일에 액세스할 수 있는지 확인해야 합니다. 익스프레스 기반 앱의 경우 다음과 유사한 줄을 추가해야 합니다.

app.use(express.static(path.join(__dirname, "../public")));

다음으로, AdminJS에 CSS 스타일 시트 파일이 있는 위치를 알려주고 구성 파일에 다음 코드를 배치해야 합니다(여기서 sidebar.css는 CSS 파일 이름이며 해당 위치는 public 입니다).

assets: {
    styles: ["/sidebar.css"],
}

 

 

예시 사용 준비

아래에는 AdminJS 사이드바에서 색상을 변경하는 간단한 예가 있습니다.

:root {
  --topbar-color: white;
  --sidebar-bg-color: darkgray;
  --sidebar-color: white;
  --sidebar-link-color: orange;
}

section[data-css="sidebar"] {
  background-color: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color);
  border: none;
}

section[data-css="sidebar"] svg {
  fill: var(--sidebar-color) !important;
}

a[data-css="sidebar-logo"] {
  background-color: var(--sidebar-bg-color) !important;
}

section[data-css="sidebar-resources"] {
  background: var(--sidebar-bg-color) !important;
}

[data-css="sidebar"] section a {
  background: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color);
}

[data-css="sidebar"] a:hover {
  color: var(--sidebar-link-color);
}