petal_components

(★ 1,050)

Phoenix + Live View HEEX Components

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- dependabot.yml
- settings.json
- - petal_components.js
- default.css
- tailwind-gray.css
- config.exs
- dev.exs
- test.exs
- - combo-harness.html
  - tap-debug.html
- app.css
- colors.css
- streaming_chat.md
- - accordion.ex
  - alert.ex
  - aurora.ex
  - avatar.ex
  - badge.ex
  - border_beam.ex
  - border_plasma.ex
  - brand_icon.ex
  - breadcrumbs.ex
  - button.ex
  - button_group.ex
  - card.ex
  - carousel.ex
  - chart.ex
  - chat.ex
  - color_scheme_switch.ex
  - combo_box.ex
  - command.ex
  - confetti.ex
  - container.ex
  - data_table.ex
  - dropdown.ex
  - field.ex
  - form.ex
  - helpers.ex
  - icon.ex
  - input.ex
  - input_group.ex
  - input_otp.ex
  - language_select.ex
  - link.ex
  - loading.ex
  - local_time.ex
  - marquee.ex
  - menu.ex
  - meteors.ex
  - modal.ex
  - navigation_menu.ex
  - number_ticker.ex
  - pagination.ex
  - pagination_internal.ex
  - popover.ex
  - progress.ex
  - rating.ex
  - shine_border.ex
  - showcase.ex
  - skeleton.ex
  - slide_over.ex
  - social_button.ex
  - sparkline.ex
  - spotlight_card.ex
  - stepper.ex
  - table.ex
  - tabs.ex
  - text_animation.ex
  - toast.ex
  - toggle_group.ex
  - tooltip.ex
  - typography.ex
  - user_dropdown_menu.ex
- - a11y_live.ex
- petal_components.ex
- release.exs
- - combo_box.test.js
  - command_dialog.test.js
  - data_table.test.js
  - dropdown.test.js
  - helpers.js
  - popover.test.js
  - toast_group.test.js
  - toast_pause.test.js
- - a11y_live_test.exs
  - accordion_test.exs
  - alert_test.exs
  - aurora_test.exs
  - avatar_test.exs
  - badge_test.exs
  - border_beam_test.exs
  - border_plasma_test.exs
  - brand_icon_test.exs
  - breadcrumbs_test.exs
  - button_group_test.exs
  - button_test.exs
  - card_test.exs
  - carousel_test.exs
  - chart_test.exs
  - chat_test.exs
  - color_scheme_switch_test.exs
  - combo_box_test.exs
  - command_test.exs
  - confetti_test.exs
  - container_test.exs
  - css_assets_test.exs
  - data_table_test.exs
  - dropdown_test.exs
  - field_test.exs
  - form_test.exs
  - icon_test.exs
  - input_group_test.exs
  - input_otp_test.exs
  - input_test.exs
  - language_select_test.exs
  - link_test.exs
  - loading_test.exs
  - local_time_test.exs
  - marquee_test.exs
  - menu_test.exs
  - meteors_test.exs
  - modal_test.exs
  - navigation_menu_test.exs
  - number_ticker_test.exs
  - pagination_test.exs
  - popover_test.exs
  - progress_test.exs
  - rating_test.exs
  - shine_border_test.exs
  - showcase_test.exs
  - skeleton_test.exs
  - slide_over_test.exs
  - social_button_test.exs
  - sparkline_test.exs
  - spotlight_card_test.exs
  - stepper_test.exs
  - table_test.exs
  - tabs_test.exs
  - text_animation_test.exs
  - toast_test.exs
  - toggle_group_test.exs
  - tooltip_test.exs
  - typography_test.exs
  - user_dropdown_menu_test.exs
- - component_case.ex
  - phoenix_playground_helper.ex
  - test_constants.ex
- test_helper.exs
.dockerignore
.formatter.exs
.gitignore
.iex.exs
.tool-versions
CHANGELOG.md
CONTRIBUTING.md
coveralls.json
dev.exs
Dockerfile
fly.toml
LICENSE.md
logo.png
mix.exs
mix.lock
package-lock.json
package.json
README.md
rules.md
screenshot.png
UPGRADE_GUIDE.md
vitest.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/petalframework/petal_components

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd petal_components

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Docker

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.

docker build -t petal-components .

Dockerfile을 기반으로 실행 가능한 이미지를 빌드합니다.

docker run -p 8080:80 petal-components

빌드된 이미지를 실제 컨테이너로 실행합니다.

✅ 터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.