Flowbite Svelte #6 - Flowbite Svelte 사용 예제

Flowbite Svelte 사용 예제: 간단한 웹사이트 구축

목표: Flowbite Svelte를 사용하여 간단한 웹사이트를 구축합니다.

준비물:

• Svelte 개발 환경
• Flowbite Svelte 설치
• Tailwind CSS 지식 (선택 사항)

 

1. 프로젝트 생성:

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install flowbite-svelte

 

 

2. index.svelte 파일 수정:

import { Button, Card, Container, Heading } from 'flowbite-svelte';

<script>
    import { onMount } from 'svelte';

    let title = 'Flowbite Svelte로 만든 웹사이트';
    let description = 'Flowbite Svelte는 Svelte 프레임워크를 위한 공식 UI 컴포넌트 라이브러리입니다.';

    onMount(() => {
        console.log('Flowbite Svelte 사용 중!');
    });
</script>

<Container>
    <Heading level="1" class="text-center mb-4">{title}</Heading>
    <Card>
        <div class="card-body">
            <p class="card-text">{description}</p>
            <Button>버튼</Button>
        </div>
    </Card>
</Container>

 

 

3. 실행:

npm run dev

 

4. 브라우저에서 확인:

http://localhost:3000 에서 웹사이트를 확인하면 Flowbite Svelte 컴포넌트를 사용하여 만든 간단한 웹사이트가 표시됩니다.

 

5. 추가 컴포넌트 사용:

Flowbite Svelte는 다양한 UI 컴포넌트를 제공합니다. 버튼, 드롭다운 메뉴, 모달, 네비게이션 메뉴, 카드, 양식 등 필요한 컴포넌트를 추가하여 원하는 기능을 구현할 수 있습니다.

 

참고:

• Flowbite Svelte 공식 문서: https://flowbite-svelte.com/docs/pages/introduction
• Flowbite Svelte GitHub 저장소: https://github.com/themesberg/flowbite-svelte
• Tailwind CSS 공식 웹사이트: https://tailwindcss.com/docs/installation

 

이 예제는 Flowbite Svelte를 사용하는 가장 기본적인 방법입니다. Flowbite Svelte는 더 많은 기능을 제공하며, 다양한 방식으로 사용될 수 있습니다. 문서와 예제를 참고하여 더욱 복잡한 웹사이트와 웹 애플리케이션을 만들어 보아요!