동적 Tabs

0

Tabs 동적 생성

위와 같이 Tabs-Content를 만들 때 각 Tab의 너비는 200px로 일정하고 박스 내에 들어가는 Tab은 가변적이다.즉, CSS 상에서 Width의 값을 정적으로 주게 되면 정적인 Tabs를 만들지 못한다.

이를 위해 다음과 같은 단계를 걸쳐 전체 가로 너비가 받아 온 데이터에 따라 동적으로 결정되는 Tab을 구현하였다.

 

사용자 지정 속성(CSS 변수, 종속 변수)

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 제작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다.
사용자 지정 속성은 전용 표기법을 사용해 정의하고,(--main-color: black;) var() 함수를 사용해 접근할 수 있습니다.
(color: var(--main-color);)

.tabs {
  --tab-width: 200;
  --tabs-length: 0;
  width: calc(var(--tab-width) * var(--tabs-length) * 1px);
  margin: 0 auto;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  overflow: hidden;
}

사용자 지정 속성을 이용하여 CSS 상에서 Tab의 전체 너비(--tabs-length)를 0으로 초기화 해주고 실제 웹 상에 랜더링되는 너비 값은

calc() 함수를 사용하여 동적으로 계산하게 만들었다. 

 

setProperty()

CSSStyleDeclaration.setProperty() 방법 인터페이스는 CSS 스타일 선언 객체의 속성에 대한 새 값을 설정합니다.

$tabs.style.setProperty("--tabs-length", tabsData.length);
//tabsData는 tab의 정보를 담고 있는 배열 변수이다. 현재 tab의 정보는 총 3개이다.

이후에 JS에서 CSS의 동적 변수인 --tabs-length의 값을 현재 배열 상에 적재되어 있는 데이터의 갯수만큼 초기화 해주었다.