<devsite-nav-buttons> 맞춤 요소를 사용하면 버튼 그룹을 새로고침할 수 있습니다.
현재 페이지를 반환할 수 있습니다.
데모
Java sample code
사용
사용하려면 name 속성이 있는 <devsite-nav-buttons> 요소를 만들고
내부에 서로 다른 value 속성을 가진 여러 button 요소를 배치합니다.
각 버튼 그룹에서 default을 추가하여 버튼 하나를 기본값으로 선택합니다.
속성을 추가합니다.
<devsite-nav-buttons name="language"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
마크다운 (.md) 파일에서 커스텀 요소가
표준 HTML 요소(예: section, div, p)를 사용합니다.
<div> <devsite-nav-buttons name="language"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons> </div>
그런 다음 동적 태그 쿼리 문자열 매개변수를 검사하여 표시할 콘텐츠를 결정합니다. 표시됩니다.
{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}
ID를 사용한 인페이지 연결
일반적으로 <devsite-nav-buttons> 요소는
사용자가 버튼을 클릭하면 새 URL로 연결되기 때문입니다.
페이지를 새로고침합니다 요소를 페이지 중간에 사용하는 경우
페이지에서 요소의 위치를 북마크할 수 있도록 하려면
요소에서 고유한 id를 지정하여
페이지가 로드될 때 페이지가 요소의 위치로 스크롤되도록 합니다.
<devsite-nav-buttons name="language" id="code-examples"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
URL 매개변수 옵션
기본적으로 사용자가 버튼 중 하나를 클릭하면 버튼의 값이 저장됩니다.
LocalStorage에 저장하겠습니다. 선택된 값은 주소 표시줄에 자동으로 추가됩니다.
<devsite-nav-buttons> 요소가 포함된 다른 페이지의 URL 매개변수
동일한 name 및 value 필드를 사용합니다.
기본 버튼의 URL 매개변수 삭제
기본 동작을 재정의하고
default 버튼을 클릭하면 요소에 param="reset"를 추가합니다.
<devsite-nav-buttons name="language" param="reset"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
기본 버튼에 항상 URL 매개변수 표시
사용자가 <devsite-nav-buttons> 요소가 포함된 페이지를 처음으로 방문할 때
default 버튼이 강조 표시되고 주소가 변경되지 않음
막대를 계속 움직일 수 있습니다.
default 버튼의 URL 매개변수로 주소 표시줄을 업데이트하려면 다음 단계를 따르세요.
가 있는 페이지에 URL 매개변수가 항상 있도록 하고
<devsite-nav-buttons> 요소에서 요소에 param="always"를 추가합니다.
<devsite-nav-buttons name="language" param="always"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
버튼 스타일 지정
기본적으로 <devsite-nav-buttons> 요소 내의 버튼에는 '칩'이 있습니다
제공합니다. 버튼의 시각적 효과를 높이거나 낮추려면
값이 filled 또는 text인 type 속성. 각각 스타일을 지정합니다.
button 요소
type="filled"를 사용한 버튼 스타일 지정 :
<devsite-nav-buttons name="language" type="filled"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
type="text"를 사용한 버튼 스타일 지정 :
<devsite-nav-buttons name="language" type="text"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>