Kurulum

HowwydSheet'i projenize dahil ederek hemen kullanmaya başlayın. Modern ve reaktif bir deneyim için AlpineJS ile güçlendirilmiştir.

<!-- Stiller -->
<link rel="stylesheet" href="https://cdn.howwyd.com/sheet/v2/index.css">

<!-- Scriptler -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdn.howwyd.com/sheet/v2/index.js"></script>

Kullanım

Bir sayfayı başlatmak için x-data="howwydSheet()" direktifini kullanın. Görünürlüğü kontrol etmek için standart AlpineJS direktiflerini kullanabilirsiniz.

<!-- Tetikleyici Buton -->
<button @click="$dispatch('open-sheet')">Sayfayı Aç</button>

<!-- Sayfa Bileşeni -->
<div x-data="howwydSheet({ initialSize: '50%' })" 
     @open-sheet.window="show()" 
     class="sheet" 
     x-show="isVisible" 
     x-cloak>
    
    <!-- Arka Plan Örtüsü -->
    <div class="overlay" @click="hide()"></div>
    
    <!-- İçerik Alanı -->
    <div class="contents" :style="sheetStyle">
        <header class="controls" 
                @mousedown="startDrag" @touchstart="startDrag"
                @mousemove.window="onDrag" @touchmove.window="onDrag"
                @mouseup.window="endDrag" @touchend.window="endDrag">
            <div class="draggable-area">
                <div class="draggable-thumb"></div>
            </div>
        </header>
        <main class="body">
            <h2>Merhaba Dünya</h2>
        </main>
    </div>
</div>

Boyutlandırma

Sayfanın başlangıç yüksekliğini initialSize parametresi ile ayarlayabilirsiniz. Yüzde (%) veya piksel (px) değerleri kabul edilir.

Kilitleme (Locking)

Kullanıcının sayfayı yanlışlıkla kapatmasını önlemek için lockable: true özelliğini kullanın. Bu modda arka plan örtüsüne tıklamak sayfayı kapatmaz.

Yapılandırma

howwydSheet() fonksiyonuna bir yapılandırma nesnesi geçirerek davranışı özelleştirin.

Metotlar

Bileşen içinde kullanabileceğiniz metotlar.

Sıkça Sorulan Sorular