Bileşenler bir arayüz parçasını kolaylıkla tekrar tekrar kullanmanıza ve tutarlı bir şekilde stillendirmenize olanak sağlar.
Bağlantı kartı ya da bir Youtube yerleştirmesi örnek olarak verilebilir.
Starlight MDX dosyaları içerisindeki bileşenlerin kullanılmasını destekler ve bazı ortak bileşenleri kullanımınıza sunar.
Bir bileşeni MDX dosyanıza dahil ederek kullanabilir ve sonrasında JSX etiketi olarak oluşturabilirsiniz.
HTML etiketleri gibi görünür ancak ilk harfi büyük olarak ismi uyan import ifadesidir:
Starlight Markdown içeriklerinize varsayılan stillendirmeyi uygular, örneğin elemanlar arasına marjin ekler.
Bu stiller bileşeninizin görünümü ile çakışıyorsa, bileşeninizde stili etkisiz kılmak için not-content sınıfını bileşeninize ekleyin.
Yerleşik Bileşenler
Starlight bazı yerleşik bileşenleri ortak dokümantasyon ihtiyaçları için sunar.
Bu bileşenler @astrojs/starlight/components paketinde mevcuttur.
Sekmeler
<Tabs> ve <TabItem> bileşenlerini kullanarak sekmeli arayüz gösterebilirsiniz.
You can display a tabbed interface using the <Tabs> and <TabItem> components.
Her <TabItem> bileşenini kullanıcılara göstermek için label sahibi olması zorunludur.
Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi sekmeler oluşturur:
<Card> bileşenini kullanarak Starlight’ın stiline uyan kutu içerisinde yer alan içeriği gösterebilirsiniz.
Birden fazla kartı <CardGrid> bileşeni içinde, yeteri kadar boşluk olduğu zaman kartları yan yana sıralı olarak göstermek için sarmalayın.
Starlight, içeriğinizde görünmesi için <Icon> bileşenini kullanarak bir grup ortak ikonları kullanımınıza sunar.
Her <Icon>name değerine ihtiyaç duyar ve isteğe bağlı olarak label, size, ve color özellikleri eklenebilir.
Yukarıdaki kod, aşağıdaki gibi çıktı oluşturur:
Tüm İkonlar
Mevcut tüm ikonların listesi aşağıdaki gibi ilişkili isimleriyle gösterilmiştir. Bileşen kodunu kopyalamak için bir ikona tıklayın.