weightless
1.0.0
이 프로젝트는 개발의 끝에 도달했습니다. 코드를 탐색하십시오.
작은 발자국이있는 고품질 웹 구성 요소
이 프로젝트에 관심을 보여 주셔서 감사합니다! 옥토 카트에게 먹이를주는 데 도움을주고 싶다면 분명히 스타 게이저가되어야합니다. 이 웹 구성 요소는 사용되도록 만들어졌습니다. 그들은 가볍고 간단한 API를 가지고 있으며 확장하고 구성하기 쉽습니다. 데모 https://weightless.dev/elements를 보려면 여기로 이동하십시오.
데모를 시도하려면 여기로 가십시오.
$ npm i weightless
빨리 시작하려면 CLI를 사용할 수 있습니다.
$ npm init web-config new my-project --lit
umd 번들을 사용하려면 https://unpkg.com/weightless/umd/weightless.min.js 를 가져올 수 있습니다. 이렇게하면 모든 요소가 가져 오므로 테스트 목적으로 만 사용하는 것이 좋습니다.
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | 이름 | 꼬리표 | 설명 | 선적 서류 비치 | 데모 |
|---|---|---|---|---|
| 배경 | wl-backdrop | 오버레이 된 요소 뒤에 사용할 어두운 층. | 선적 서류 비치 | 데모 |
| 기치 | wl-banner | 비 중단 메시지 및 관련 옵션 조치를 표시합니다. | 선적 서류 비치 | 데모 |
| 단추 | wl-button | 단일 탭으로 사용자가 조치를 취하고 선택할 수 있도록합니다. | 선적 서류 비치 | 데모 |
| 카드 | wl-card | 그룹 관련 내용 및 조치. | 선적 서류 비치 | 데모 |
| 확인란 | wl-checkbox | 옵션을 켜거나 끕니다. | 선적 서류 비치 | 데모 |
| 대화 | wl-dialog | 매우 중단적인 메시지. | 선적 서류 비치 | 데모 |
| 분할기 | wl-divider | 목록 및 레이아웃에서 내용을 그룹화하는 얇은 라인. | 선적 서류 비치 | 데모 |
| 확장 | wl-expansion | 확장 가능한 세부 정보를 제공합니다. | 선적 서류 비치 | 데모 |
| 상 | wl-icon | 일반적인 행동과 항목에 대한 기호. | 선적 서류 비치 | 데모 |
| 상표 | wl-label | 양식 요소에 더 액세스 할 수 있도록하십시오. | 선적 서류 비치 | 데모 |
| 목록 항목 | wl-list-item | 목록에 항목을 표시합니다. | 선적 서류 비치 | 데모 |
| Nav | wl-nav | 앱의 목적지에 액세스 할 수 있습니다. | 선적 서류 비치 | 데모 |
| 팝 오버 | wl-popover | 상황에 맞는 고정 요소 | 선적 서류 비치 | 데모 |
| 팝 오버 카드 | wl-popover-card | 팝 오버에게 상황에 맞는 감각을주십시오. | 선적 서류 비치 | 데모 |
| 진행률 바 | wl-progress-bar | 막대를 0%에서 100%로 채 웁니다. | 선적 서류 비치 | 데모 |
| 진행 스피너 | wl-progress-spinner | 원을 0%에서 100%로 채 웁니다. | 선적 서류 비치 | 데모 |
| 라디오 | wl-radio | 세트에서 하나의 옵션을 선택하십시오. | 선적 서류 비치 | 데모 |
| 리플 | wl-ripple | 터치 동작을 나타냅니다. | 선적 서류 비치 | 데모 |
| 선택하다 | wl-select | 일련의 옵션에서 하나 이상의 값을 선택하십시오. | 선적 서류 비치 | 데모 |
| 슬라이더 | wl-slider | 다양한 값에서 선택하십시오. | 선적 서류 비치 | 데모 |
| 스낵바 | wl-snackbar | 화면 하단에 간단한 메시지를 제공합니다. | 선적 서류 비치 | 데모 |
| 스위치 | wl-switch | 옵션을 켜거나 끕니다. | 선적 서류 비치 | 데모 |
| 꼬리표 | wl-tab | 콘텐츠 그룹 간의 탐색을 구성합니다. | 선적 서류 비치 | 데모 |
| 탭 그룹 | wl-tab-group | 콘텐츠 그룹 간의 탐색을 구성합니다. | 선적 서류 비치 | 데모 |
| 텍스트 | wl-text | 단락으로 그룹 텍스트를 그룹화합니다. | 선적 서류 비치 | 데모 |
| Textarea | wl-textarea | 다중 텍스트 필드. | 선적 서류 비치 | 데모 |
| 텍스트 필드 | wl-textfield | 단일 라인 텍스트 필드. | 선적 서류 비치 | 데모 |
| 제목 | wl-title | 새 섹션의 시작을 나타냅니다. | 선적 서류 비치 | 데모 |
| 툴팁 | wl-tooltip | 유익한 맥락 관련 텍스트. | 선적 서류 비치 | 데모 |
로드맵에는 흥미로운 것들이 많이 있습니다. v1.0.0까지 API가 상당히 안정적이지만 리팩토링이 여전히 발생하고 거꾸로 호환성을 깨뜨릴 수 있습니다. 라이브러리 사용, 풀 요청을 만들거나 문제를 추가하는 것을 환영합니다.
이 저장소에 기여하는 것을 환영합니다! 다음은 개발을위한 프로젝트를 설정하는 방법에 대한 몇 가지 지침입니다.
git clone https://github.com/andreasbm/weightless.git 실행 하여이 저장소를 복제하십시오.npm i 실행하십시오.npm run s 으로 개발 서버를 돌리십시오. 브라우저는 올바른 URL에서 자동으로 열려야합니다. 그렇지 않은 경우 브라우저를 열고 http://localhost:1350 으로 이동할 수 있습니다.npm run test 로 테스트를 실행합니다.npm run lint 로 묶습니다.npm run docs 실행하여 문서를 컴파일하십시오.요소는 TypeScript로 작성되었으며 스타일 시트는 SASS로 작성됩니다. 모든 웹 구성 요소는 Lit-element를 사용합니다.
도움을 줄 수있는 방법에 대해 더 알고 싶다면 Contributing.md 파일을 반드시 확인해야합니다. 모든 기고자는 아래 기고자 섹션에 추가됩니다.
| Andreas Mehlsen | 너? |
MIT에 따라 라이센스.
