---
title: Bileşenler
description: Bileşen yapısı ve yönetimi.
icon: Component
---

Bileşen, bir kez oluşturulan ve birden fazla bölümde ya da başka bileşenlerde yeniden kullanılabilen bağımsız bir yapı taşıdır. Dışarıdan veri alır ve her kullanıldığı yerde aldığı veriyle çalışır.

<Callout type="warning" title="Tasarım modu gereklidir">
Bileşen oluşturmak için **Tasarım** modunda olmanız gerekmektedir.
</Callout>

## Bileşen oluşturma

**Elementler** kısmından bir **Çerçeve** (veya **Yazı**) element'i ekleyin. Element'e sağ tıklayarak **Bileşen Oluştur** seçeneğine tıklayın. Açılan modalda bileşeninizin **ikonunu** ve **adını** girerek **Kaydet**'e basın.

Bileşen oluşturulduktan sonra detay ekranına otomatik olarak yönlendirilirsiniz. Sayfaya geri dönmek için sol panelin üstünde bulunan **Geri Dön** butonunu kullanabilir, tekrar detaya girmek için **Katmanlar** kısmındaki bileşene çift tıklayabilir veya **Kaydedilmiş Şablonlar** kısmından ilgili bileşene tıklayabilirsiniz.

<Callout type="warning" title="Sayfa seviyesinde bileşen">
Sayfalar bölümlerden oluşur. Hızlı düzenleme için sayfa seviyesine doğrudan bileşen eklemek mümkün olsa da bu bileşenler canlıda render olmaz. Bileşenleri mutlaka bir bölüm veya başka bir bileşen içinde kullanın.
</Callout>

## Bileşene veri ekleme ve bağlama

Bir bileşen, dışarıdan alacağı veriyi **Veri Ekle** modalı ile tanımlar. Bileşeni kullandığınız yerde bu veri alanına bir değer bağlarsınız. Bu yaklaşım, aynı bileşenin farklı verilerle farklı yerlerde kullanılmasını sağlar.

<Callout type="info" title="Veriler">
Veri ekleme ve bağlama akışı hakkında daha detaylı bilgi için [Veriler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/data) sayfasını inceleyebilirsiniz.
</Callout>

## Bileşeni bölüme ekleme

Bir bölüm detayındayken **Elementler** panelindeki **Şablonlar** sekmesinden veya bölüm altındaki **Bileşen Ekle** butonundan bileşeninizi seçerek ekleyebilirsiniz. Bileşeni ekledikten sonra bileşenin beklediği veri alanlarına bölümden gelen ilgili verileri **Veri Bağla** ile geçirin.

<Callout type="info" title="Bileşene veri bağlama önerisi">
Bileşenin beklediği veriye her zaman bölümden veya ebeveyn bileşenden gelen veriyi doğrudan bağlamak daha güvenilirdir. Bazı özel durumlarda **Sayfanın ürününü kullan** gibi otomatik bağlamalar da mümkündür; ancak bölümden doğrudan bağlama, bileşenin nerede kullanıldığından bağımsız çalışmasını sağlar.
</Callout>

## Listelerle bileşen kullanımı

Bir liste item seviyesine bileşen eklenerek, listenin her iterasyonunda item verisi bileşene otomatik olarak geçirilebilir. Örneğin ürün listesi item'ında `productListItem` değeri, ürün kartı bileşeninin `product` verisine bağlanarak her iterasyonda doğru ürünü göstermesi sağlanır.

<Callout type="info" title="Listeler">
Listeler ve item detayında bileşen kullanımı hakkında daha detaylı bilgi için [Listeler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/list) sayfasını inceleyebilirsiniz.
</Callout>

## Bileşen içinde bileşen

Bileşenler kendi içlerinde başka bileşenleri barındırabilir. Örneğin ürün detay bölümündeki bir satın alma butonları bileşeni, içinde sepete ekle ve hızlı öde butonu bileşenlerini tutabilir. Her bileşen kendi verisini tanımlar; üst bileşen, alt bileşenlere kendi verisinden değerler geçirebilir.

## Varyantlar

Bölümler farklı ekran boyutlarına kırılma noktalarıyla uyum sağlarken, bileşenler **varyantlar** ile farklı görünümler sunar. Her bileşen oluşturulduğu anda bir **varsayılan varyant** ile gelir ve istediğiniz kadar yeni varyant ekleyebilirsiniz.

Her varyanta ayrı stiller ve aşağıdaki durumlar (state) uygulanabilir:

- **Üzerine gel** — `:hover`
- **Aktif** — `:active`

Bu durumlar, ilgili varyant aktif olduğunda geçerli olacak stillerin ayrı ayrı tanımlanmasını sağlar.

Varsayılan varyantta veya eklediğiniz bir varyantta yaptığınız stil değişiklikleri, o varyantın **Üzerine gel** ve **Aktif** durumlarına da otomatik olarak aktarılır. Bu durumlar üzerinde yaptığınız güncellemeler ise yalnızca ilgili duruma özel olarak geçerli olur.

<Callout type="info" title="Varyantlar bileşenlere özgüdür">
Varyantlar yalnızca bileşenlerde kullanılır; bölümlerde karşılığı kırılma noktalarıdır. Element seviyesindeki `:hover`, `:active`, `:focus` gibi pseudo-selector animasyonları hakkında daha detaylı bilgi için [Animasyonlar](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/animations) sayfasını inceleyebilirsiniz.
</Callout>

## Kırılma noktalarına uyum

Bileşenlerde bölümlerdeki gibi kırılma noktasına özel bir tasarım ekranı bulunmaz. Bunun yerine kırılma noktası, elementlere **koşul** olarak bağlanır ve bu sayede farklı ekran boyutlarında farklı stiller veya görünürlük değerleri uygulanır.

<Callout type="info" title="Koşullar">
Kırılma noktasını koşul olarak kullanma hakkında daha detaylı bilgi için [Koşullar](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/conditions) sayfasını inceleyebilirsiniz.
</Callout>

## Temel örnekler

Temel örneklerde bileşen oluşturmanın akışlarını adım adım inceleyebilirsiniz:

- [Ürün Listesi > Ürün kartı bileşeni oluşturma](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/creating-product-card-component)
- [Ürün Detay > Yazı bileşeni oluşturma](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/creating-text-component)
- [Ürün Detay > Varyant Seçici > Bileşen oluşturma ve varyant tiplerini listeleme](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/variant-picker/creating-component)
- [Ürün Detay > Fiyat bileşeni oluşturma](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/creating-price-component)
- [Ürün Detay > Satın Alma Butonları > Miktar girişi > Bileşen oluşturma](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/buy-buttons/quantity/creating-component)