Framework7 (3) 썸네일형 리스트형 📱 Framework7로 만든 앱을 Android APK로 패키징하는 방법 Framework7은 Vue, React, Svelte 등과 통합해서 사용할 수 있는 강력한 모바일 UI 프레임워크입니다. 이번 글에서는 Framework7 + Vue + Vite 조합으로 만든 프로젝트를 Android에서 실행 가능한 APK 파일로 패키징하는 전 과정을 소개합니다.✅ 1. 프로젝트 빌드 준비먼저 프로젝트 내 웹 자산을 빌드합니다. Vite 기반이라면 아래 명령어로 빌드하면 됩니다:npm run build이 작업을 통해 www 또는 dist 폴더에 index.html과 번들된 자바스크립트 파일들이 생성됩니다.✅ 2. Capacitor 설정 및 Android 플랫폼 추가웹 앱을 네이티브 앱으로 감싸기 위해 Capacitor를 사용합니다.npx cap init질문에 답하며 앱 이름과 ID (.. ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS) 🔧 ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS)이번에는 을 활용한 커스텀 다이얼로그를 직접 만들고, ref를 통해 프로그래밍적으로 제어할 수 있도록 구성해봅시다.✅ 구현 목표다이얼로그의 열기/닫기 기능을 ref로 제어title, message, confirmText, cancelText를 동적으로 전달onConfirm, onCancel 같은 이벤트 핸들러도 동적으로 바인딩🧱 Step 1. CustomDialog.vue 컴포넌트 구현 {{ state.title }} {{ state.message }} {{ state.cancelText }} .. Framework7 + TailwindCSS로 커스텀 다이얼로그 만들기 Framework7을 사용하다 보면 기본 다이얼로그(Alert, Confirm 등)의 스타일을 커스터마이징하고 싶을 때가 있습니다. 하지만 Framework7의 기본 다이얼로그는 HTML 커스터마이징이 어렵기 때문에, 을 활용하여 TailwindCSS 기반의 커스텀 다이얼로그를 직접 만들어보겠습니다.✅ 왜 대신 을 쓰나요?Framework7의 다이얼로그는 빠르게 만들 수 있지만:내부 마크업이 고정되어 있음TailwindCSS로 직접 커스터마이징하기가 제한적임반면 은 완전히 내 마음대로 마크업을 구성할 수 있어서,디자인 자유도와 유연성이 매우 높습니다.🧱 Step 1. 커스텀 다이얼로그 컴포넌트 만들기components/CustomDialog.vue 파일을 만들어 아래와 같이 작성합니다: .. 이전 1 다음
