AMP 환경에 햄버거 메뉴 설치

개시하다

Next.js를 사용하여 fullamp로 구축되어 있습니다.에서 햄버거 메뉴를 설정할 때 JavaScript를 실행할 수 없기 때문에 AMP 구성 요소를 사용해야 합니다.
AMP 구성 요소를 열고 닫을 수 있는 메뉴를 찾으면amp-sidebar를 가장 먼저 찾을 수 있습니다.
쉽게 가져올 수 있을 것 같지만 좌우 어느 방향으로만 사이드바가 나오는지 제어할 수 있을 뿐, 자신이 원하는 동작이 아니어서 방치했다가 더 자유로운 설치가 발견돼 소개합니다.
이번엔amp-bind 상태로 학급명 변경이 이뤄져 CSS 개폐 메뉴가 시행됐다.

스위치 메뉴 설치

amp-bind 로드

헤드에서amp-bind를 읽습니다.

<script
  async
  custom-element="amp-bind"
  src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
/>

스위치 버튼 설정

메뉴를 열고 닫는 요소를 만들려면 누르십시오.
on 속성 setState를 사용하면 isOpen 변수의 상태로 업데이트할 수 있습니다.
4

<a on="tap:AMP.setState({ isOpen: !isOpen })"> 開閉 </a>

TSX에 기술된 경우 a 요소에 on 속성이 정의되어 있지 않으므로 다음 유형의 오류가 발생합니다.
4

(JSX attribute) on: string
Type '{ on: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
  Property 'on' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.ts(2322)

따라서 JSX의 a요소의 유형 정의를 변경해야 한다.
다음은 React입니다.AnchorHTMLAttributes에 on 속성이 추가되었습니다.

interface AmpAnchorHTMLAttributes<T> extends React.AnchorHTMLAttributes<T> {
  on?: string;
}

declare namespace JSX {
  interface IntrinsicElements {
    a: React.DetailedHTMLProps<
      AmpAnchorHTMLAttributes<HTMLAnchorElement>,
      HTMLAnchorElement
    >;
  }
}

메뉴 설정

메뉴 요소에서 스위치 단추로 설정된 isOpen에 따라 클래스 이름을 변경합니다.
amp-bind 문서에서 [class] 속성에서 클래스 이름을 동적으로 지정하면 되지만 이것도 JSX로 기술할 수 없습니다.
4

<div [class]="isOpen ? 'open' : 'close'"></div>

데이터-amp-bind-class의 속성 정의를 대체합니다.
이 때className을 완전히 덮어쓰려면 이 요소의 모든 클래스를 기술해야 합니다.
4

<div
  data-amp-bind-class="isOpen ? 'menu open' : 'menu close'"
  className="menu close"
>
  <ul>
    <li>メニュ-1</li>
    <li>メニュ-2</li>
    <li>メニュ-3</li>
  </ul>
</div>

open,close는 각각 스타일로 메뉴의 개폐를 실현한다.

.menu {
  transition-duration: 500ms;
}
.open {
  height: 400px;
}
.close {
  height: 0;
}

총결산

이렇게 되면 스위치 버튼을 눌렀을 때마다 isOpen은 반전되고 메뉴의 클래스 이름도 바뀐다.
이번에 사용한amp-bind 문서
블로거