ডক লেআউট

ডক লেআউট

ডক লেআউট হল ডকুমেন্টেশন পৃষ্ঠাগুলোর জন্য একটি দুটি কলামের প্যাটার্ন — বর্ণনা ডান দিকে, কোড বাম দিকে — যা মোবাইলে একটি একক কলামে সংকুচিত হয়।

গঠন

.doc কে বাইরের র্যাপার হিসেবে এবং প্রতিটি সারির জন্য .doc-section ব্যবহার করুন। প্রতিটি সেকশনের একটি .doc-section--description এবং একটি .doc-section--code কলাম রয়েছে।

মৌলিক সেকশন

একটি সাধারণ সেকশন একটি বর্ণনা ব্লককে একটি কোড স্নিপেটের সাথে যুক্ত করে।

ডেমো কনটেন্ট
<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>

একটি কোড ব্লকের সাথে

সিনট্যাক্স-হাইলাইটেড উদাহরণের জন্য .doc-section--code এর ভিতরে কোড-ব্লক পারশিয়াল ব্যবহার করুন।

ডেমো কনটেন্ট
{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}