sitelo UI

sitelo-ui, sitelo için bir bileşen kitaplığıdır. Her bileşen bir HTML dizesi döndüren bir fonksiyondur, bu yüzden hâlihazırda yazdığınız sayfanın içine doğrudan yerleşir — derleyici yok, çalışma zamanı yok, hidrasyon yok.

Bu bölümdeki her örnek, çevresindeki sayfayı işleyen derlemenin aynısı tarafından işlenir. Gördüğünüz şey, altındaki kodun ürettiği şeydir ve bu sitenin açık ile koyu temalarını izler, çünkü sitelo-ui belgelerin okuduğu data-theme özniteliğinin aynısını okur.

Yerleşim

• ortalanmış

  KapsayıcıOrtalanmış, genişliği sınırlı bir sayfa sütunu.
• birikiüç

  YığınBoşluğu bir belirteçle verilen esnek bir satır ya da sütun.
• 1234

  IzgaraMedya sorgusu olmadan sığabildiği kadar sütun sığdırır.
• ya da

  AyırıcıBölümler arasında etiketli ya da etiketsiz bir çizgi.
• En boy oranıBir kutuyu sabit biçimde tutun, yüklenirken hiçbir şey kaymasın.

• Bir kart

  KartBaşlığı, gövdesi ve alt bilgisiyle gruplanmış içerik için bir yüzey.

Tipografi

• Başlık

  Altyazı

  TipografiKendi öğesini seçen bir yazı ölçeği.

• Bir başlık

  Ve bir paragraf.

  DüzyazıMarkdown’dan ya da bir CMS’ten gelen ham HTML’i biçimlendirin.

• Belgeleri okuyun.

  BağlantıBir dış bağlantının ihtiyaç duyduğu özniteliklerle biçimlendirilmiş çapa.
• SimgelerTek ızgarada 99 glif; çevresindeki metinle boyutlanıp renklenir.

Girdiler

• KaydetVazgeç

  DüğmeBeş türev, beş renk, üç boyut.
• Birİki

  Düğme grubuTek bir denetime birleştirilmiş düğmeler.
• E-posta

  Metin alanıEtiket, denetim, yardım metni ve hata, birbirine bağlanmış.
• TemaAçıkKoyu

  Açılır listeUyumlu biçimlendirilmiş yerli bir select.
• Site haritasıRSS akışı

  Onay kutusuDeğiştirilmiş değil, CSS ile biçimlendirilmiş gerçek bir girdi.
• freepro

  Seçenek grubuBir ad paylaşan radyolarla, birkaçından bir seçim.
• Herkese açıkTaslaklar

  AnahtarHemen uygulanan bir ayar için açık/kapalı değiştirici.
• KaydırıcıUyumlu biçimlendirilmiş yerli bir range girdisi.
• AçıkKapalı

  Geçiş düğmesiBasılı kalan bir düğme.
• abc

  Geçiş grubuDüğme ya da bağlantı olarak bölmeli bir denetim.

Veri gösterimi

• ALGHAT+1

  AvatarVarsa bir görsel, yoksa baş harfler.
• Gelen kutusu12

  RozetBir köşeye iliştirilmiş bir sayı ya da nokta.
• geçtistatik

  EtiketBir künye, bir durum, bir süzgeç.
• Üzerime gel

  İpucuÜzerine gelme ve odakta bir ipucu, tümüyle CSS ile çizilmiş.

• Sayfa	Boyut
  /	4,1 kB
  /docs	12,7 kB

  TabloBir kaydırma kabında, veriden satır ve sütunlar.
• • Yönlendirme

    Dosya tabanlı

  Listeİki yanında birer şey bulunan satırlar.

• 

  ŞekilBir görsel ve altyazısı, tek bir şekil olarak.

Geri bildirim

• Dağıtıldı.

  UyarıSimgesi ve ARIA rolü rengini izleyen bir ileti.

• Burada bir şey yok

  Boş durumBir listenin, içinde bir şey olmadan önce nasıl göründüğü.
• İlerlemeBilinen iş için bir çubuk, gerisi için bir döndürücü.
• İskeletGelecek içeriğin biçiminde bir yer tutucu.
• Kaydedildi.

  BildirimBetikten eklenen, geçici bir ileti.

Gezinme

• Gezinti yoluBu sayfada biten ata izi.
• SayfalamaGerçek bağlantılar olarak, pencerelenmiş numaralı sayfalar.
• Birİki

  SekmelerBağlantılar, sekme başına bir sayfa — ya da yerinde değişen paneller.
• sitelo

  v2

  Uygulama çubuğuBir yanda marka, öbür yanda gezinme ve eylemler.
• Tema değiştiriciAçık ve koyu, girişte parlamadan.

Katmanlar

• Kipi aç

  ModalPopover API üzerinde bir iletişim kutusu — hiçbir yerde betik yok.
• Çekmeceyi aç

  ÇekmeceKenardan bir panel, aynı popover işleyişi.
• Eylemler ▾

  Menüdetails üzerine kurulu bir açılır menü, açma ve kapama bedava.
• Bir soru

  AkordeonDışlayıcı kip dahil, katlanabilir bölümler.
• Daha fazla göster

  İstenene dek gizli.

  KatlanabilirAkordeon süsleri olmadan tek bir “daha fazla göster”.

Bölümler

• Bir manşet

  Ve bir cümle.

  HeroBir açılış sayfasının tepesi: manşet, cümle, eylemler.
• BelgelerRehber · Bileşenler

  Alt bilgiBağlantı sütunları ve altlarında bir satır.

• Sayfalar

  204

  +8

  İstatistikBakmaya değer bir sayı ve ne anlama geldiği.
• 1. 1

     Kurulum

  2. 2

     Derleme

  AdımlarNumaralı bir akış, biteni bitmiş olarak işaretlenmiş.

• 1. v2.7

     Bölümler

  Zaman çizelgesiBir çizgi boyunca sırayla girdiler.
• sitelo.dev

  MaketBir tarayıcı, pencere, telefon ya da uçbirim içinde ekran görüntüsü.

Biçimlendirme

• TemalarHer renk, yarıçap ve yazı tipi, tek bir çağrıdan.

Kurulum

İki satır: bileşenleri içe aktarın ve head içine styles() koyun. Belgelerdeki Bileşenler sayfası kurulumu, temaları, çağırma kuralını ve isteğe bağlı istemci çalışma zamanını kapsar ve her dışa aktarımı tek bir tabloda listeler.

Depodaki examples/ui dizini bütün kümeyi tek bir sayfada işler.

Ekstralar

Her şey tek bir stil sayfasına ait değildir. Dokulu ve süslü olanlar — başlangıç olarak bir film greni — her bileşenin kendi sayfasını getirdiği ikinci bir giriş noktası olan sitelo UI ekstralarında yaşar, böylece bir sayfa yalnızca kullandığını bağlar.