Bileşenlere Genel Bakış

Rott UI, mantıksal kategorilere ayrılmış 29 üretim için hazır bileşen sunar.

Tüm Bileşenler (Alfabetik)

Tüm bileşenlere yan çubuktan alfabetik olarak göz atın veya aşağıdaki kategorilere göre keşfedin:

Yerleşim Bileşenleri

Ekranlarınızı yapılandırmak için temel bileşenler.

• Container - Root wrapper with safe area handling
• Content - Scrollable content container with keyboard handling
• Header - Navigation header with logo and actions
• Footer - Footer container
• Item - Flexible layout container

Gezinme Bileşenleri

Kullanıcı gezinmesi ve eylemleri için etkileşimli bileşenler.

• Button - Interactive button with variants, sizes, icons
• Pressable - Custom touchable areas
• Tab - Tab navigation items
• TabWidget - Complete tab navigation system
• BottomMenu - Bottom navigation bar

Girdi Bileşenleri

Doğrulama ve maskeleme ile form girdileri.

• Input - Base input component (overview)
  • Amount - Currency input
  • Checkbox - Checkbox
  • Credit Card - Card number
  • CVC - Card security code
  • Date - Date picker
  • Email - Email validation
  • Expire Date - Card expiry
  • IBAN - IBAN formatting
  • Numeric - Numbers only
  • Password - Password with show/hide
  • Phone - Phone masking
  • PIN - PIN/OTP
  • Search - Search input
  • Select - Dropdown
• Toggle - Toggle switch component

Görüntüleme Bileşenleri

İçerik görüntülemek için bileşenler.

• Label - Text display with theming
• Icon - SVG icons (117+ built-in)
• Image - Image display component
• EmptyState - Empty state illustrations
• Skeleton - Loading placeholders

Geri Bildirim Bileşenleri

Kullanıcı geri bildirimi ve katmanlar için bileşenler.

• Modal - Full-screen and partial modals
• Alert - Alert banners
• AlertDialog - Confirmation dialogs
• ActionMenu - Action sheet menus
• Notification - Toast notifications
• Result - Result/confirmation screens
• Timer - Timer and countdown components

Veri Bileşenleri

Liste ve veri görüntülemek için bileşenler.

• List - High-performance lists with FlashList

Yardımcı Bileşenler

Yaygın desenler için yardımcı bileşenler.

• Separator - Visual dividers
• FormContainer - Form wrapper
• ImageBackground - Background image container
• Common - Common UI patterns (CommonItem, CommonItemContainer)

Başlarken

Öncelikli bileşenlerle başlayın:

1. Button - En sık kullanılan
2. Input - Karmaşık formlar (14+ tip)
3. Container & Content - Uygulama yapısı
4. Modal - Katmanlar ve diyaloglar

Bileşen Özellikleri

Tüm Rott UI bileşenleri şu özellikleri paylaşır:

• ✅ Tam TypeScript desteği
• ✅ Tema renk varyantları
• ✅ Ortak UI prop'ları (margin, padding, flex vb.)
• ✅ Erişilebilirlik desteği
• ✅ Kapsamlı test
• ✅ Detaylı dokümantasyon