title	description
Bileşenler	Starlight ile MDX'te bileşenlerin kullanımı.

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.

Astro dokümantasyonunda bileşen oluşturma hakkında daha fazla bilgi edinin.

Bileşen Kullanımı

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:

---
# src/content/docs/index.mdx
title: Dokümantasyonuma hoşgeldiniz.
---

import SomeComponent from '../../components/SomeComponent.astro';
import AnotherComponent from '../../components/AnotherComponent.astro';

<SomeComponent prop="birşey" />

<AnotherComponent>
	Bileşenler ayrıca **içe yerleştirilmiş içerik** barındırabilir.
</AnotherComponent>

Starlight'ın Astro'dan aldığı güç sayesinde, MDX dosyalarınız içerisinde desteklenen herhangi bir arayüz çerçevesi ile (React, Preact, Svelte, Vue, Solid, Lit, ve Alpine) oluşturulmuş bileşenlerinizi destekleyebilirsiniz. Astro dokümantasyonunda MDX içerisinde bileşen kullanmak hakkında daha fazlasını öğrenin.

Starlight stilleri ile uyumluluk

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.

---
// src/components/Example.astro
---

<div class="not-content">
	<p>Starlight'ın varsayılan içerik stillendirmesinden etkilenmez.</p>
</div>

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

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> ve <TabItem> bileşenlerini kullanarak sekmeli arayüz gösterebilirsiniz. Her <TabItem> bileşenini kullanıcılara göstermek için label sahibi olması zorunludur. Starlight’ın yerleşik ikonlarından birini, etiketin yanında kalması için zorunlu olmayan icon niteliğini kullanın.

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
	<TabItem label="Yıldızlar" icon="star">
		Sirius, Vega, Betelgeuse
	</TabItem>
	<TabItem label="Uydular" icon="moon">
		Io, Europa, Ganymede
	</TabItem>
</Tabs>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi sekmeler oluşturur:

Sirius, Vega, Betelgeuse Io, Europa, Ganymede

Senkronize Sekmeler

syncKey niteliği ekleyerek çoklu sekme gruplarınızı senkronize edin.

Sayfadaki aynı syncKey değerine sahip tüm <Tabs> bileşenleri aynı etkin etiketi görüntüler. Bu, okuyucunuza bir kez seçme (örneğin okuyucunuzun işletim sistemi ya da paket yöneticisi) ve sayfa boyunca yansıyan seçimi görmesine olanak tanır.

İlişkili sekmeleri senkronize etmek için, her <Tabs> bileşenine özdeş syncKey niteliği ekleyin ve hepsinin aynı <TabItems> etiketi kullandığına emin olun:

# src/content/docs/example.mdx

import { Tabs, TabItem } from '@astrojs/starlight/components';

_Bazı yıldızlar:_

<Tabs syncKey="constellations">
	<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
	<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
</Tabs>

_Bazı ötegezegenler:_

<Tabs syncKey="constellations">
	<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
	<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

Bazı yıldızlar:

Bellatrix, Rigel, Betelgeuse Pollux, Castor A, Castor B

Bazı ötegezegenler:

HD 34445 b, Gliese 179 b, Wasp-82 b Pollux b, HAT-P-24b, HD 50554 b

Kartlar

import { Card, CardGrid } from '@astrojs/starlight/components';

<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.

<Card> bileşeni title değerine ihtiyaç duyar ve opsiyonel olarak Starlight'ın kurulu ikonlarından birinin ismini taşıyan icon özelliğini içerebilir.

import { Card, CardGrid } from '@astrojs/starlight/components';

<Card title="Buna bir bakın.">Vurgulamak istediğin ilgi çekici içerik</Card>

<CardGrid>
	<Card title="Yıldızlar" icon="star">
		Sirius, Vega, Betelgeuse
	</Card>
	<Card title="Uydular" icon="moon">
		Io, Europa, Ganymede
	</Card>
</CardGrid>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

Vurgulamak istediğin ilgi çekici içerik

Sirius, Vega, Betelgeuse Io, Europa, Ganymede

:::tip Projenizin kilit özelliklerini göstermek için anasayfanızda kart kılavuzunu kullanın. stagger niteliğini ikinci sütunun kartlarını düşey eksenli olarak sıralamak ve görsel açıdan ilgi çekmek için ekleyin:

<CardGrid stagger>
	<!-- kartlar -->
</CardGrid>

:::

Bağlantı kartları

Belirgin olarak farklı sayfalara bağlantı eklemek için <LinkCard> bileşenini kullanın.

<LinkCard> title değerine ve href özelliğine ihtiyaç duyar. İsteğe bağlı olarak description ya da target gibi bağlantı özelliklerini ekleyebilirsiniz.

Birden fazla <LinkCard> bileşeninizi, yeterince boşluk olduğunda yan yana olacak şekilde göstermek için <CardGrid> içerisinde gruplayın.

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<LinkCard
	title="Starlight'ı Özelleştirmek"
	description="Starlight sitenizi kendi özel stiliniz, yazı karakteriniz ve daha fazlası ile nasıl oluşturacağınızı öğrenin."
	href="/tr/guides/customization/"
/>

<CardGrid>
	<LinkCard title="Markdown Oluşturmak" href="/tr/guides/authoring-content/" />
	<LinkCard title="Bileşenler" href="/tr/guides/components/" />
</CardGrid>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur.

import { LinkCard } from '@astrojs/starlight/components';

Ara bölümler

Ara bölümler (ayrıca "uyarı" ve "açıklama balonu" olarak da bilinir), sayfanın ana içeriği ile birlikte ikincil bilgi göstermek için kullanışlıdır.

<Aside> bileşeni zorunlu olmayan note (varsayılan), tip, caution ya da danger değerini alan type niteliğine sahiptir. title niteliği eklemek varsayılan ara bölüm başlığını değiştirir.

# src/content/docs/example.mdx

import { Aside } from '@astrojs/starlight/components';

<Aside>Özel başlığı olmayan bir varsayılan ara bölüm</Aside>

<Aside type="caution" title="Dikkat Et!">
	Özel bir başlık *ile* uyarı ara bölümü.
</Aside>

<Aside type="tip">

Diğer içerikler de ara bölümde desteklenir.

```js
// Örneğin bir kod parçacığı.
```

</Aside>

<Aside type="danger">Şifreni kimseye verme.</Aside>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import { Aside } from '@astrojs/starlight/components';

Özel başlığı olmayan bir varsayılan ara bölüm Özel bir başlık *ile* uyarı ara bölümü.

Diğer içerikler de ara bölümde desteklenir.

// Örneğin bir kod parçacığı.

Şifreni kimseye verme.

Starlight, ayrıca <Aside> bileşenine alternatif olarak Markdown ve MDX içerisinde ara bölüm oluşturmak için özel bir sözdizimi sağlar. “Markdown'da İçerik Yazmak” rehberine özel sözdizimi detayları için bakın.

Kod

<Code> bileşenini Markdown kod bloğu kullanmanın mümkün olmadığı zaman sözdizim vurgulu kod oluşturmak için kullanın - örneğin dosyalar, veritabanları ve API'ler gibi harici kaynaklardan gelen verileri oluşturmak için.

<Code> bileşeninin destekleği niteliklerin tüm detaylarını Expressive Code “Code Component” dokümanında inceleyin.

# src/content/docs/example.mdx

import { Code } from '@astrojs/starlight/components';

export const exampleCode = `console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');`;
export const fileName = 'example.js';
export const highlights = ['file', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import { Code } from '@astrojs/starlight/components';

export const exampleCode = console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');; export const fileName = 'example.js'; export const highlights = ['file', 'CMS'];


Alınan kod

Vite’nin ?raw son ekini herhangi kod dosyasını string olarak almak için kullanın.
<Code> bileşenine alınan bu string'i sayfanıza dahil etmek için ekleyin.
import { Code } from '@astrojs/starlight/components';
import importedCode from '/src/env.d.ts?raw';

<Code code={importedCode} lang="ts" title="src/env.d.ts" />
Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
import importedCode from '/src/env.d.ts?raw';

Dosya Ağacı

<FileTree> bileşenini dizin yapısını dosya ikonları ve toplanabilir alt dizinleri göstermek için kullanın.
Dosyalarınızın yapısını ve dizinleri <FileTree> içerisinde numaralandırılmamış Markdown listesi ile açıkça belirtin.
İç içe yerleşmiş liste kullanarak ya da belirli bir içeriksiz dizin oluşturmak için liste elemanının sonuna / ekleyerek alt dizin oluşturun.
Aşağıdaki sözdizimi dosya ağacınının görünümünü özelleştirmek için kullanılabilir:

Dosya ya da dizinin ismini kalın yaparak vurgulayın. Örneğin **README.md**.
Dosya ya da dizine isimden sonra metin ekleyerek yorum ekleyin.
Dosyalara ya da dizinlere isim olarak ... ya da … yazımını kullanarak ayrılmış bilgi alanı ekleyin.

# src/content/docs/example.mdx

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- astro.config.mjs **önemli** bir dosya
- package.json
- README.md
- src
  - components
    - **Header.astro**
  - …
- pages/

</FileTree>
Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
import { FileTree } from '@astrojs/starlight/components';


astro.config.mjs önemli bir dosya
package.json
README.md
src

components

Header.astro


…


pages/


Adımlar

<Steps> bileşenini numaralanmış görevler listesini biçimlendirmek için kullanın.
Her aşamasının açıkça belirtilmeye ihtiyaç duyan çok karmaşık adım adım rehberleri oluşturmak için kullanışlıdır.
Standart Markdown sıralanmış listesini <Steps> bileşeni ile sarmalayın.
<Steps> bileşeni içerisinde tüm olağan Markdown sözdizimi uygulanabilir.
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Bileşeni MDX dosyasına dahil edin:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Sıralanmış liste elemanlarını `<Steps>` ile sarmalayın.

</Steps>
Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:
import { Steps } from '@astrojs/starlight/components';



Bileşeni MDX dosyasına dahil edin:
import { Steps } from '@astrojs/starlight/components';


Sıralanmış liste elemanlarını <Steps> ile sarmalayın.



İkon

import { Icon } from '@astrojs/starlight/components';
import IconsList from '~/components/icons-list.astro';
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 eklenebilir.
size ve color nitelikleri ikonun görünümünü CSS birimleri ve renk değerleri ile ayarlamak için kullanılabilir.
# src/content/docs/example.mdx

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />
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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

components.mdx

components.mdx

Bileşen Kullanımı

Starlight stilleri ile uyumluluk

Yerleşik Bileşenler

Sekmeler

Senkronize Sekmeler

Kartlar

Bağlantı kartları

Ara bölümler

Kod

Alınan kod

Dosya Ağacı

Adımlar

İkon

Tüm İkonlar

Files

components.mdx

Latest commit

History

components.mdx

File metadata and controls

Bileşen Kullanımı

Starlight stilleri ile uyumluluk

Yerleşik Bileşenler

Sekmeler

Senkronize Sekmeler

Kartlar

Bağlantı kartları

Ara bölümler

Kod

Alınan kod

Dosya Ağacı

Adımlar

İkon

Tüm İkonlar