lion 다운로드 - lion 소스 코드 다운로드

lion

기타 소스코드

0.17.2

다운로드

사자

웹사이트 · 기초 · 가이드 · 구성 요소 · 블로그

Lion은 성능이 뛰어나고 액세스 가능하며 유연한 웹 구성 요소 세트입니다.!

이는 자신의 구성 요소 레이어로 확장될 수 있는 독립적인 화이트 라벨 레이어를 제공합니다.

고성능: 최소한의 종속성으로 모든 관련 브라우저에서 뛰어난 성능을 발휘하는 데 중점을 둡니다.
접근성: WCAG 2.2 AA 표준을 준수하여 모든 사람이 액세스할 수 있는 구성 요소를 만드는 것을 목표로 합니다.
유연성: 모든 요구 사항에 맞게 사용, 채택 및 확장할 수 있는 웹 구성 요소 및 JavaScript 클래스를 통해 솔루션을 제공합니다.
최신 코드: Lion은 순수 ES 모듈로 배포됩니다.
함수/클래스 및 웹 구성 요소 노출: 가장 적절한 형식으로 기능을 제공합니다.

참고: 데모 예제는 단순해 보일 수도 있고 그다지 세련되지 않을 수도 있습니다. 이것은 의도적인 것입니다. 기본으로 디자인되어 이미 존재하는 스타일을 다루지 않고도 원하는 디자인에 맞게 자신만의 스타일을 쉽게 추가할 수 있습니다.

라이온 가이드 살펴보기 ▶

설치 방법

 npm i @lion/ui

사용방법

웹 구성 요소 확장

이것은 lion 의 주요 사용 사례입니다 . 구성 요소 클래스를 가져오고 자신의 디자인 시스템 구성 요소에 맞게 확장합니다.

 import { css } from 'lit';import { LionInput } from '@lion/ui/input.js';class MyInput 확장 LionInput {
  static get styles() {return [ super.styles, css` /* 스타일을 여기에 */ `,];
  }}customElements.define('my-input', MyInput);

자바스크립트 시스템 사용

Lion에는 JavaScript API를 갖춘 몇 가지 "시스템"이 있습니다. 예를 들면 localize , overlays , ajax 등이 있습니다.

 <스크립트 유형="모듈">
  '@lion/ui/ajax.js'에서 { ajax }를 가져옵니다.

  ajax.fetch('data.json').then(response => response.json()).then(data => { // 데이터로 작업 수행});</script>

웹 구성 요소 사용

일반적인 사용 사례는 아니지만 lion 요소를 직접 사용할 수도 있습니다.

 <스크립트 유형="모듈">
  import '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>

문제

우리가 제공하는 패키지에 문제가 발생하면 새로운 버그 문제를 열어주세요. 예상되는 동작과 현재 동작에 대한 설명을 포함해야 합니다. 재생산을 추가하면 항상 도움이 됩니다.

기능 요청

개선할 수 있는 방법에 대한 아이디어가 있으면 토론을 확인하여 비슷한 아이디어나 기능 요청이 있는지 확인하세요. 없는 경우 새 토론 주제로 기능 요청을 시작하세요. [Feature Request] My awesome feature 제목을 추가하고 개선을 통해 기대하는 사항과 사용 사례에 대한 설명을 추가하세요.

콘텐츠

이름	버전	설명
@lion/ui		구성요소 세트
@lion/아약스		가져오기 주변의 작은 래퍼
싱글톤 관리자		싱글톤 관리자는 여러 파일 위치에서 로드된 싱글톤 인스턴스가 싱글톤을 유지하도록 하는 방법을 제공합니다. 싱글톤이 포함된 패키지의 두 가지 주요 버전이 사용되는 경우 주로 유용합니다.
Babel 플러그인 확장 문서		구성에 따라 가져오기 및 템플릿을 다시 작성하는 플러그인입니다. 이를 통해 확장 코드를 계속 사용하면서 소스 패키지의 기존 문서를 재사용할 수 있습니다.
프로비던스 분석		프로비던스는 코드를 분석하여 사용 통계를 생성하는 '모든 것을 보는 눈'입니다. 소프트웨어의 효율성과 인기를 측정합니다. 몇 가지 명령만으로 (중요한) 변경 사항에 대한 영향을 측정하여 릴리스 프로세스를 더욱 안정적이고 예측 가능하게 만들 수 있습니다.
문서 게시		패키지와 함께 게시/배송될 수 있도록 문서를 모노레포에 복사하고 처리하는 도구입니다.
비고 확장		소스 파일에서 가져와서 마크다운을 확장하는 설명용 플러그인입니다.
로켓 사전 설정 사자 문서 확장		자신만의 Lion 확장 레이어를 유지 관리할 때 유사한 문서를 유지하고 싶을 가능성이 높습니다. 마크다운 파일을 복사하고 다시 쓰는 것은 가능하지만, 뭔가 변경될 때마다 다시 복사하고 다시 작성해야 합니다. 이 작업을 자동으로 수행하려면 로켓에 대해 이 사전 설정을 사용할 수 있습니다.

기술

Lion Web Components는 미래 지향적이며 잘 지원되는 입증된 기술을 사용하는 것을 목표로 합니다. 우리가 선택한 스택은 이를 반영해야 합니다.

문학
npm
웹 구성 요소 열기
모던 웹
모카
차이
ESLint
더 예뻐요
ES 모듈
많고 많은 테스트

이론적 해석

우리는 고품질의 접근 가능한 UI 구성 요소를 만드는 것이 어렵고 시간이 많이 걸린다는 것을 경험을 통해 알고 있습니다. 모든 상황에서 작동하고 많은 엣지 케이스를 지원하며 뛰어난 일반 구성 요소를 얻으려면 많은 반복, 많은 개발 시간 및 많은 테스트가 필요합니다. 모든 관련 화면 판독기에서 액세스할 수 있습니다.

Lion은 귀하를 위해 무거운 짐을 지는 것을 목표로 합니다. 즉, 스타일을 제공하고, 구성 요소를 구성하고, 최소한의 사용자 정의 로직 세트를 추가하여 자체 디자인 시스템만 적용하면 됩니다.