현대적인 디자인으로 가벼운 자바 스크립트 컨텍스트 메뉴 라이브러리를 만들었습니다.

어떤 것을 만들었는가

Fluent Design의 영향을 받은 현대적이고 아름답고 가벼운 JavaScript 컨텍스트 메뉴 라이브러리를 만들었습니다.

컨텍스트 메뉴가 표시되면 제대로 애니메이션도 붙어 있습니다! 또한 배경은 흐림 효과가 걸린 반투명 디자인입니다.



그리고 어두운 모드를 지원합니다. 브라우저가 어두운 모드로 설정되어 있으면 자동으로 검정색을 기조로 한 디자인으로 전환됩니다.

어떻게 만들었는가

그물에서 컨텍스트 메뉴의 라이브러리를 찾으면 많이 나오는 것의 오래된 디자인의 것이 많았고, 멋있는 것 (특히 Fluent Design과 같은 외형의 것)은 좀처럼 발견되지 않았습니다.

또, 의존하고 있는 것이 없고 단체로 동작해 주었으면 하는(jQuery나다)라고 하는 일도 있어, 스스로 만들어 버렸습니다.

사용법

먼저 GitHub에서 데리러 와주세요. 라이센스는 MIT 라이센스입니다.

htps : // 기주 b. 코 m / 로보 t- 응ゔ ぇ와 r / 모로 r - 이렇게 xt. js

자세한 사용법은 GitHub의 README (일본어 버전도 있습니다)에 쓰여져 있지만 가볍게 설명합니다.

README를 읽으면 알지만, 여러 가지 방법으로 같은 것을 할 수 있습니다. 여기에서는 가장 사용하는 것에 짜서 설명합니다.

const contents = [
    {
        type: "item",
        label: "Alert",
        callback: () => {
            alert("Clicked!");
        }
    },
    {
        type: "separator"
    },
    {
        type: "item",
        label: "No Callback"
    },
];

const context = new Context("#target", contents);

매우 간단합니다.
new Context("#target", contents) 의 제 1 인수는 타겟으로 하는 요소입니다. 이 경우 id="target" 가 설정된 요소를 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴가 표시됩니다.

두 번째 인수는 컨텍스트 메뉴의 내용입니다. 객체의 배열입니다. 배열에 들어 있는 오브젝트는 아이템과 세퍼레이터의 2 종류입니다.

아이템은 문자 그대로 아이템, 세퍼레이터는 아이템간의 구분선입니다. 세퍼레이터는 비슷한 아이템끼리를 정리할 때 사용하는 것입니다.

아이템의 경우, 각 프로퍼티은 다음과 같은 의미입니다.

{
    type: "item", //固定。アイテムを指定しているいうことを表す
    label: "Alert", //ラベル。コンテキストメニューにはこのテキストが表示される
    callback: () => { //コールバック。アイテムがクリックされたときに実行される。省略可能
        alert("Clicked!");
    }
}

또, 세퍼레이터의 경우, 다음과 같이 되어 있습니다.

{
    type: "separator" //固定。セパレーターを指定しているということを表す
}

구분 기호는 type 이외의 다른 특성을 지정해도 무시됩니다.

사용법은 이런 느낌입니다. 간단하게 만들었습니다. 그 밖에도 몇 가지 함수가 있지만 그다지 사용하지는 않을 것입니다.

덤

CSS 변수로 외형을 커스터마이즈 할 수 있습니다만, 2021년 5월 25일 현재 아직 이 라이브러리는 제작 도중에 향후 바뀔 가능성이 있으므로 여기에는 쓰지 않습니다. 아무래도 사용자 정의하고 싶다면 소스 코드를 읽으십시오. CSS 변수 관련은 비교적 처음으로 써 있기 때문에 바로 알까 생각합니다.