Układ dokumentu

Układ dokumentu

Układ dokumentu to dwukolumnowy wzór dla stron dokumentacji — opis po lewej, kod po prawej — który zwija się do jednej kolumny na urządzeniach mobilnych.

Struktura

Użyj .doc jako zewnętrznego opakowania i .doc-section dla każdego wiersza. Każda sekcja ma kolumnę .doc-section--description i .doc-section--code.

Podstawowa sekcja

Typowa sekcja łączy blok opisu z fragmentem kodu.

Treść demonstracyjna
<div class="doc">
  <div class="doc-section">
    <div class="doc-section--description">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <div class="doc-section--code">
      <!-- code snippet -->
    </div>
  </div>
</div>

Z blokiem kodu

Użyj części code-block wewnątrz .doc-section--code dla przykładów z podświetleniem składni.

Treść demonstracyjna
{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}