탭

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 탭 필드 위젯의 컨트롤을 일반 및 호버 상태 스타일링에 Elementor 자체 위젯이 사용하는 것과 동일한 구조인 패널 탭으로 구성합니다. 마스터 애드온 내부 위젯 빌더를 사용하면 탭을 정의하고 각 탭에 하위 컨트롤을 배치하면 Elementor 패널에서 하나의 긴 필드 스크롤 대신 컴팩트한 탭 스트립으로 렌더링합니다.

탭 컨트롤이 지원됩니다 조건 모든 분야와 마찬가지로 그 아이들도 읽혀집니다 나뭇가지 구문 템플릿 엔진 세 부분으로 구성된 토큰으로, {{ tabs.tab_1.field }}는, 필요 반복하지 않습니다 두 가이드 다 세부사항 및 한계를 커버합니다.

탭은 구조적인 필드입니다. 그것은 그것의 자신의 가치를 붙들지 않습니다; 가치는 아이들에게 속하고,당신의 템플렛은 탭 분야,탭 및 그것의 안쪽에 분야를 지명하는 중첩한 경로를 통해서 각자를 읽습니다. 반복문 없음,간계 없음,단지 주소.

Tabs 필드가 수행하는 작업 #

• 탭 스트립을 렌더링합니다 위젯의 패널에서 Elementor의 제어 탭 메커니즘을 기반으로 구축되었습니다.
• 탭 세트를 보유합니다각각 고유한 이름, 레이블 및 하위 컨트롤 목록이 있습니다.
• 관련 상태를 함께 유지합니다, 클래식 페어링은 동일한 설정의 일반 버전과 호버 버전입니다.
• 중첩된 경로를 통해 자식 값을 노출합니다 템플릿에서: 탭 필드의 이름, 탭, 필드.
• 탭 전체에 동일한 하위 이름을 허용합니다, 그래서 Normal과 Hover는 서로를 깨끗하게 비춰줄 수 있습니다.

빌더를 막 시작했다면 다음을 읽어보세요 위젯 빌더 개요 이 전에.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 이름이 붙은 탭 필드가 있는 버튼 위젯입니다 states 일반 탭과 호버 탭을 누르고 있으며 각각 색상 필드가 지정되어 있습니다 bg.

Tabs 필드를 추가하는 방법 #

Widget Builder 편집기에서 찾을 때까지 왼쪽의 필드 패널을 스크롤합니다 탭 popover Toggle 및 Repeater와 같은 다른 구조 필드와 함께 나열된 필드입니다.

아래의 섹션으로 드래그하세요 스타일 상태 스타일링이 존재하는 탭은 탭을 정의하고 각 탭에 자식 컨트롤을 놓습니다. 필드의 옵션은 착지하자마자 왼쪽에 열립니다.

탭 필드 옵션을 설명했습니다 #

• 라벨: elementor의 탭 스트립 위에 표시된 제목입니다.
• 이름: 예를 들어 전체 탭 그룹, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다 states. 모든 어린이의 템플릿 경로의 첫 번째 세그먼트입니다.
• 탭: 탭의 목록. 각 탭은 이름을 가지고 있습니다 (예를 들어 템플릿 경로에서 사용됩니다 normal), 라벨(스트립에 표시됨, 예를 들어 “일반”) 및 자체 하위 컨트롤 세트.
• 어린이 통제: 각 탭 안의 필드. 값 필드 유형은 여기에서 작동하며,각각은 자체 옵션과 값 모양을 유지합니다.
• 설명, 표시 라벨, 구분 기호 및 조건은 다른 모든 항목과 동일한 표시 옵션입니다.

중첩 경로를 통해 탭 값을 읽습니다 #

탭 필드의 자식은 세 부분으로 구성된 점 경로로 주소가 지정됩니다: 탭 필드 이름, 탭 이름, 하위 필드 이름.

{{ tabsname.tabname.fieldname }}

탭을 반복하는 것은 없습니다. 각 값은 필요한 곳에서 정확하게 읽혀집니다. 버튼 예제의 경우 a states 일반 탭과 호버 탭이 있는 탭 필드에는 각각 a가 있습니다 bg 색상 필드, 이와 같이 CSS 패널에 와이어:

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

두 탭에서 자식 이름을 동일하게 지정하는 것은 의도적이며 지원됩니다. 내부적으로 빌더는 카운터를 사용하여 중복 키를 중복 제거하지만 템플릿 경로는 탭별로 유지됩니다 bg 보통과 bg 호버에서 두 개의 뚜렷하고 깔끔하게 어드레싱된 값을 유지합니다. 미러링된 이름은 목표로 하는 패턴입니다: 템플릿을 읽는 사람은 일반 및 호버 규칙이 하나의 경로 세그먼트만 다릅니다.

조심하세요: 플랫 토큰 {{ bg }} 아무것도 해결하지 않으며 두 부분도 마찬가지입니다 {{ normal.bg }}. 경로는 항상 Tabs 필드의 자체 이름으로 시작합니다. 탭 값이 빈 상태로 인쇄되면 세그먼트를 먼저 계산합니다. 탭 이름을 바꾸면 동일한 무음 방식으로 경로가 중단됩니다; CSS 는 계속 컴파일하고 값은 도착을 중지하므로 규칙을 작성하기 전에 탭 이름을 정합니다.

Elementor 에서 Tabs 컨트롤을 사용합니다 #

Elementor 의 페이지에 사용자 정의 위젯을 추가합니다 (또는 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다). 탭 스트립은 탭 레이블이 있는 패널에서 렌더링되며 탭을 클릭하면 하위 컨트롤이 표시됩니다.

편집기는 첫 번째 탭에서 일반 배경을 설정하고,호버로 전환하고,두 번째 색상을 설정합니다. 미리보기에서 버튼을 호버링하면 전환이 즉시 표시됩니다. 두 값이 이미 위젯의 CSS 규칙에 있기 때문입니다.

일반적인 사용 사례 #

• 일반 및 호버 스타일링 버튼, 카드, 링크의 경우 클래식 페어링입니다.
• 활성 상태와 비활성 상태 토글, 필터 및 탐색 항목용.
• 설정 전후 비교하거나 위젯을 공개합니다.
• 빛과 어두운 변종, 편집자가 한 섹션에서 두 구성표를 모두 조정할 수 있도록 합니다.
• 이상하고 심지어 행 스타일링 목록 및 테이블 위젯에서.

탭 필드를 작업하기 위한 팁 #

• 전체 3부분 경로로 값을 주소 지정합니다. {{ states.hover.bg }} 작동하다; {{ bg }} 그리고 {{ hover.bg }} 하지 마십시오.
• 탭에 자녀 이름을 미러링합니다. 동일한 필드, 동일한 이름, 하나의 서로 다른 경로 세그먼트; 템플릿은 계속 읽을 수 있고 탭은 계속 비교할 수 있습니다.
• 탭 이름을 짧게, 소문자로 유지하세요. 템플릿 식별자이므로 normal 그리고 hover “탭 1” 과 “탭 2” 를 이겼다.
• 상태에는 탭을 사용하고 주제에는 섹션을 사용하세요. 동일한 설정의 두 가지 변형이 탭에 속합니다; 관련 없는 설정은 별도의 섹션에 속합니다.
• 각 어린이는 자신의 유형의 가치 형태를 유지한다는 것을 기억하십시오. 탭 내부의 슬라이더는 여전히 다음과 같이 읽습니다 {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

자주 묻는 질문 #

감싸는 #

위젯 빌더 탭 필드는 상태 스타일을 깔끔한 패널 패턴으로 바꿉니다: 정의 normal 그리고 hover 일단 하위 이름을 미러링하면 CSS가 읽혀집니다 {{ states.normal.bg }} 반대 {{ states.hover.bg }} 다른 것은 변하지 않고요. 짝을 이루는 상태보다는 내용을 반복하기 위해,the 리피터 필드 는 도달 할 구조 형제입니다. 나머지 탐색 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.