sitelo UI

sitelo-ui adalah pustaka komponen untuk sitelo. Setiap komponen adalah fungsi yang mengembalikan string HTML, jadi ia langsung bersarang ke dalam halaman yang sedang Anda tulis — tanpa kompiler, tanpa runtime, tanpa hidrasi.

Setiap contoh di bagian ini dirender oleh build yang sama dengan yang merender halaman di sekelilingnya. Apa yang Anda lihat adalah apa yang dihasilkan kode di bawahnya, dan ia mengikuti tema terang dan gelap situs ini karena sitelo-ui membaca atribut data-theme yang sama dengan yang dibaca dokumentasinya.

Tata letak

• terpusat

  KontainerKolom halaman yang terpusat dan terbatas lebarnya.
• satuduatiga

  TumpukanBaris atau kolom flex dengan token jarak untuk celahnya.
• 1234

  GridMemuat sebanyak mungkin kolom yang muat, tanpa kueri media.
• atau

  PemisahGaris di antara bagian, dengan atau tanpa label.
• Rasio aspekTahan sebuah kotak pada bentuk tetap, agar tidak ada yang bergeser saat dimuat.

• Sebuah kartu

  KartuPermukaan untuk konten yang dikelompokkan, dengan kepala, badan, dan kaki.

Tipografi

• Judul

  Keterangan

  TipografiSkala huruf yang memilih elemennya sendiri.

• Sebuah judul

  Dan sebuah paragraf.

  ProsaTata HTML mentah dari Markdown atau sebuah CMS.

• Baca dokumentasinya.

  TautanJangkar bergaya, dengan atribut yang dibutuhkan tautan eksternal.
• Ikon99 glif pada satu kisi, diukur dan diwarnai oleh teks di sekitarnya.

Masukan

• SimpanBatal

  TombolLima varian, lima warna, tiga ukuran.
• SatuDua

  Grup tombolTombol yang disatukan menjadi satu kendali.
• Email

  Bidang teksLabel, kendali, teks bantuan, dan galat, tersambung satu sama lain.
• TemaTerangGelap

  PilihanSelect bawaan peramban, ditata agar senada.
• Peta situsUmpan RSS

  Kotak centangMasukan sungguhan, ditata dengan CSS alih-alih diganti.
• freepro

  Grup radioSatu pilihan dari beberapa, sebagai radio yang berbagi satu nama.
• PublikDraf

  SakelarPengalih nyala/mati untuk pengaturan yang langsung berlaku.
• PenggeserMasukan range bawaan peramban, ditata agar senada.
• NyalaMati

  Tombol alihTombol yang tetap tertekan.
• abc

  Grup alihKendali bersegmen, sebagai tombol atau sebagai tautan.

Tampilan data

• ALGHAT+1

  AvatarGambar bila ada, inisial bila tidak.
• Kotak masuk12

  LencanaHitungan atau titik yang disematkan di sebuah sudut.
• lulusstatis

  ChipSebuah tag, status, atau filter.
• Sorot saya

  TooltipPetunjuk saat disorot dan difokus, digambar sepenuhnya dengan CSS.

• Halaman	Ukuran
  /	4,1 kB
  /docs	12,7 kB

  TabelBaris dan kolom dari data, dalam wadah gulir.
• • Perutean

    Berbasis berkas

  DaftarBaris dengan sesuatu di kedua sisinya.

• 

  GambarSebuah gambar dan keterangannya, sebagai satu kesatuan.

Umpan balik

• Diterapkan.

  PeringatanPesan yang ikon dan peran ARIA-nya mengikuti warnanya.

• Tidak ada apa-apa di sini

  KosongSeperti apa sebuah daftar sebelum ada isinya.
• ProgresBilah untuk pekerjaan yang diketahui, pemutar untuk sisanya.
• KerangkaPenampung berbentuk konten yang akan datang.
• Tersimpan.

  ToastPesan sementara, ditambahkan dari skrip.

Navigasi

• Remah rotiJejak leluhur yang berakhir di halaman ini.
• PaginasiHalaman bernomor, dijendelakan, sebagai tautan sungguhan.
• SatuDua

  TabTautan, satu halaman per tab — atau panel yang bertukar di tempat.
• sitelo

  v2

  Bilah aplikasiMerek di satu sisi, navigasi dan tindakan di sisi lain.
• Pengalih temaTerang dan gelap, tanpa kedipan saat masuk.

Lapisan

• Buka modal

  ModalDialog di atas API popover — tanpa skrip di mana pun.
• Buka laci

  LaciPanel dari tepi, mekanika popover yang sama.
• Tindakan ▾

  MenuMenu tarik-turun di atas details, buka dan tutup secara cuma-cuma.
• Sebuah pertanyaan

  AkordeonBagian yang bisa diciutkan, termasuk mode eksklusif.
• Tampilkan lebih banyak

  Tersembunyi sampai diminta.

  Dapat diciutkanSatu “tampilkan lebih banyak”, tanpa hiasan akordeon.

Bagian

• Sebuah tajuk

  Dan sebuah kalimat.

  HeroBagian atas halaman pendaratan: tajuk, kalimat, tindakan.
• DokumentasiPanduan · Komponen

  FooterKolom-kolom tautan, dan satu baris di bawahnya.

• Halaman

  204

  +8

  StatistikAngka yang layak dilihat, dan apa artinya.
• 1. 1

     Pasang

  2. 2

     Bangun

  LangkahAlur bernomor, dengan yang selesai ditandai selesai.

• 1. v2.7

     Bagian

  Lini masaEntri berurutan menyusuri sebuah garis.
• sitelo.dev

  MaketTangkapan layar dalam peramban, jendela, ponsel, atau terminal.

Penataan

• TemaSetiap warna, radius, dan fon, dari satu panggilan.

Menyiapkannya

Dua baris: impor komponennya, dan taruh styles() di dalam head. Halaman Komponen di dokumentasi mencakup pemasangan, tema, konvensi pemanggilan, dan runtime klien yang opsional, serta mendaftar setiap ekspor dalam satu tabel.

Direktori examples/ui di repositori merender keseluruhan kumpulannya dalam satu halaman.

Tambahan

Tidak semuanya pantas berada dalam satu lembar gaya. Yang bertekstur dan yang dekoratif — dimulai dari butiran film — tinggal di sitelo UI extras, titik masuk kedua tempat tiap komponen membawa lembarnya sendiri, sehingga sebuah halaman hanya menautkan apa yang dipakainya.