Maket

Bir açılış sayfasında ürün ya da belgelerde ekran görüntüsü göstermek için. Çerçeve süstür: noktalar, adres çubuğu ve çentik hepsi aria-hidden taşır, böylece bir ekran okuyucu süsün betimini değil içerideki şeyi alır.

Tarayıcı

sitelo.dev

Merhaba dünya

Derleme sırasında işlendi, statik dosya olarak sunuldu.

mockup({ variant: 'browser', url: 'sitelo.dev' },
  div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'Merhaba dünya'),
      text({ variant: 'small', tone: 'muted' }, 'Derleme sırasında işlendi, statik dosya olarak sunuldu.'),
    ),
  ),
)

Pencere

Adres çubuğu olmayan aynı çerçeve; bir web sayfası olmayan her şey için.

URL’i olmayan bir pencere.

mockup({ variant: 'window' },
  div({ style: 'padding: 1.5rem' },
    text({ variant: 'small' }, 'URL’i olmayan bir pencere.'),
  ),
)

Trafik ışıkları

Düğmeler varsayılan olarak temayı izler. dots: 'mac' onları bunun yerine macOS kırmızı, sarı ve yeşiliyle boyar — her iki temada da aynı üçü, çünkü varlık nedenleri tanınabilir olmaktır.

sitelo.dev

Daha önce gördüğünüz bir pencere.

mockup({ variant: 'browser', url: 'sitelo.dev', dots: 'mac' },
  div({ style: 'padding: 1.5rem' },
    text({ variant: 'small' }, 'Daha önce gördüğünüz bir pencere.'),
  ),
)

Uçbirim

code türevi, bir uçbirim gibi her iki temada da koyudur.

$ npm install -D sitelo

$ npx sitelo build

✓ 1,09 sn’de derlendi

204 sayfa · 9,7 MB

mockup({ variant: 'code' },
  '<div>$ npm install -D sitelo</div>' +
  '<div>$ npx sitelo build</div>' +
  '<div style="opacity: .7">✓ 1,09 sn’de derlendi</div>' +
  '<div style="opacity: .7">  204 sayfa · 9,7 MB</div>',
)

Telefon

Güncel bir telefon: çerçeveye oyulmuş bir çentik değil, kenarlıktan ayrı duran bir Dynamic Island. Ekranın üstünde ona yer bırakın.

sitelo

Statik siteler, framework yok.

mockup({ variant: 'phone' },
  div({ style: 'padding: 3rem 1rem 1rem' },
    stack({ gap: 'md' },
      text({ variant: 'h6', as: 'div' }, 'sitelo'),
      text({ variant: 'caption', tone: 'muted' }, 'Statik siteler, framework yok.'),
      button({ size: 'sm', block: true }, 'Başlayın'),
    ),
  ),
)

Çerçeve ve ada

frame dıştaki rayı renklendirir — herhangi bir CSS rengi, böylece bir cihaz kaplaması, bu kitaplığın listesini tutması gereken bir ad değil bir onaltılık değer olur. notch: false adası olmayan her şey için onu bırakır.

stack({ direction: 'row', gap: 'md', wrap: true },
  mockup({ variant: 'phone', size: 'sm', frame: '#a8674a' }, ''),
  mockup({ variant: 'phone', size: 'sm', frame: '#2c3644' }, ''),
  mockup({ variant: 'phone', size: 'sm', frame: '#c9ced4', notch: false }, ''),
)

Ekran görüntüsüyle

Gövdenin içindeki bir <img> çerçevenin genişliğini doldurur. Görsel geç yükleniyorsa ve sayfa zıplamamalıysa onu aspectRatio() ile eşleştirin.

sitelo.dev/ui

mockup({ variant: 'browser', url: 'sitelo.dev/ui' },
  aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2)' },
    '<img src="/logo.svg" alt="sitelo UI galerisi" style="object-fit: contain; padding: 3rem">',
  ),
)

Boyutlar

Maket varsayılan olarak kabını doldurur. size onu bunun yerine sabit bir genişliğe sabitler. Telefonun kendine ait üç boyutu vardır — 22rem’lik bir telefon tablet olurdu — ve hepsinde oranlarını korur: köşeler, ray ve ada sabit uzunluklar değil, genişliğin kesirleridir.

size: sm

varsayılan — tam genişlik

stack({ gap: 'md', align: 'flex-start' },
  mockup({ variant: 'window', size: 'sm' }, div({ style: 'padding: 1rem' }, text({ variant: 'small' }, 'size: sm'))),
  mockup({ variant: 'window' }, div({ style: 'padding: 1rem' }, text({ variant: 'small' }, 'varsayılan — tam genişlik'))),
)

Bir hero içinde

Bunun var olma nedeni olan eşleşme: bir maketi hero’nun media propu olarak geçirin.

Çalışırken görün

Tarayıcıya ulaştığında artık statik HTML.

example.com

Çerçevelenmiş bir sayfa.

hero({
  level: 2,
  align: 'start',
  title: 'Çalışırken görün',
  description: 'Tarayıcıya ulaştığında artık statik HTML.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.25rem; background: var(--su-surface-2)' },
      text({ variant: 'small' }, 'Çerçevelenmiş bir sayfa.'),
    ),
  ),
}, button('Başlayın'))

Proplar

Prop	Tür	Varsayılan	Açıklama
`variant`	`'browser' \| 'window' \| 'phone' \| 'code'`	`'browser'`	Hangi çerçevenin çizileceği.
`url`	`string`	—	Adres çubuğunda gösterilir. Yalnızca browser türevi.
`dots`	`'mono' \| 'mac'`	`'mono'`	Üç düğmenin nasıl göründüğü.
`frame`	`string`	—	Dıştaki rayı renklendirir. Herhangi bir CSS rengi. Yalnızca telefon.
`notch`	`boolean`	`true`	Dynamic Island çizer. Yalnızca telefon.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Sabit genişlik. Orta boy kabı doldurur.