Dil desteği

Bloxa bileşenleri kutudan çıktığı gibi Türkçe ve İngilizce konuşur. Uygulamanı bir kez sar; etiketler, placeholder'lar, tarihler ve sayılar dile uyar.

Dene

Dili değiştir: placeholder'lar, butonlar, ay adları, sayı biçimleri ve hata mesajları birlikte güncellenir. Almanca messages ile ekleniyor.

Dosyaları buraya bırak ya da seç

Kurulum

Provider'ı kur ve uygulamanı sar. Provider yoksa bileşenler İngilizce çalışır.

Terminal

npx shadcn@latest add @bloxa/bloxa-provider

app/layout.tsx

// app/layout.tsx
import { BloxaProvider } from "@/components/ui/bloxa-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        <BloxaProvider locale="tr-TR">{children}</BloxaProvider>
      </body>
    </html>
  );
}

İstediğin metni değiştir

Yalnız değiştirmek istediğin metinleri ver; gerisi yerleşik dilden gelir.

layout.tsx

<BloxaProvider
  locale="tr-TR"
  messages={{
    noResults: "Aradığın bulunamadı",
    datePlaceholder: "Randevu tarihi seç",
  }}
>
  {children}
</BloxaProvider>

Yeni dil ekle

Yeni bir dilin metinlerini messages ile ver. Tarih, sayı ve sıralama zaten Intl üzerinden dile uyar.

layout.tsx

import { BloxaProvider, type BloxaMessages } from "@/components/ui/bloxa-provider";

const de: Partial<BloxaMessages> = {
  search: "Suchen…",
  noResults: "Keine Ergebnisse",
  datePlaceholder: "Datum wählen",
  remove: (label) => `${label} entfernen`,
};

<BloxaProvider locale="de-DE" messages={de}>{children}</BloxaProvider>