Alt bilgi

Alt bilgi, kendiliğinden sığan bir sütun ızgarası ve kaç sütun olursa olsun her zaman tam genişliği kaplayan, isteğe bağlı bir alt satırdır.

Hem footer hem siteFooter olarak dışa aktarılır, çünkü footer aynı zamanda javascript-to-html’in <footer> öğesidir ve ikisini tek bir adla içe aktarmak bir sözdizimi hatasıdır.

Temel alt bilgi

footer(
  footerColumn({ title: 'Belgeler' },
    '<a href="/docs">Başlarken</a>',
    '<a href="/docs/routing">Yönlendirme</a>',
    '<a href="/docs/data">Veri yükleme</a>',
  ),
  footerColumn({ title: 'Bileşenler' },
    '<a href="/ui">Genel bakış</a>',
    '<a href="/ui/button">Düğme</a>',
    '<a href="/ui/card">Kart</a>',
  ),
  footerColumn({ title: 'Proje' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

Alt satırla

footerBottom() her sütunu kaplar, bu yüzden üstündeki ızgara ne yaparsa yapsın tam genişlikte bir satır olarak kalır.

footer(
  footerColumn({ title: 'Belgeler' }, '<a href="/docs">Rehber</a>', '<a href="/ui">Bileşenler</a>'),
  footerColumn({ title: 'Örnekler' }, '<a href="/examples">Tüm örnekler</a>'),
  footerBottom(
    text({ variant: 'caption' }, '© 2026 Paul Browne · MIT'),
    stack({ direction: 'row', gap: 'sm' },
      chip({ size: 'sm', color: 'neutral' }, 'v2.7'),
      chip({ size: 'sm', color: 'success', dot: true }, 'Derleme geçiyor'),
    ),
  ),
)

Bir marka sütunu

Bir sütunun bağlantılardan oluşması gerekmez. Bir sütunun değil de footer() işlevinin çocuğu olarak geçirdiğiniz her şey ızgarada kendi hücresi olarak durur.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Vite ile çalışan, yapılandırma gerektirmeyen statik site üretimi.'),
    ),
  ),
  footerColumn({ title: 'Belgeler' }, '<a href="/docs">Rehber</a>', '<a href="/ui">Bileşenler</a>'),
  footerColumn({ title: 'Proje' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Sabit sütunlar

Varsayılan olarak sütunlar kendiliğinden sığar. Belirli bir biçim istediğinizde columns herhangi bir grid-template-columns değerini alır — diyelim geniş bir marka sütunu ve iki dar bağlantı sütunu.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Marka ve onun hakkında bir cümle için daha geniş bir ilk sütun.')),
  footerColumn({ title: 'Belgeler' }, '<a href="/docs">Rehber</a>'),
  footerColumn({ title: 'Dahası' }, '<a href="/examples">Örnekler</a>'),
)

Yalnızca alt satır

footer(
  footerBottom(text({ variant: 'caption' }, '© 2026 · sitelo ile kuruldu')),
)

Proplar

footer():

Prop	Tür	Varsayılan	Açıklama
`columns`	`string`	—	Bir grid-template-columns değeri. Atlandığında kendiliğinden sığar.
`as`	`string`	`'footer'`	İşlenecek öğe.

Parça	Proplar	Varsayılan	Açıklama
`footerColumn`	`title`	—	Başlıklı bir sütun; çocuklar bir bağlantı listesi olur.
`footerBottom`		—	Sütunların altında tam genişlikte satır.