Ga naar hoofdinhoud

Componenten

Code Block

Community

Toont één of meerdere regels computercode en behoudt de opmaak van deze code.

Anatomie

Gebruik deze component

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/code-block-css versie 1.

Gebruik de nl-code-block class name op een pre element met de nl-code-block__code class name op een code element:

<pre dir="ltr" translate="no" class="nl-code-block">
  <code class="nl-code-block__code">function addNumbers(a, b) {
  return a + b;
}</code>
</pre>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/code-block-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/code-block-css@1/dist/code-block.css"
/>

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/code-block-css/dist/code-block.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/code-block-css/code-block.css";

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/code-block-react versie 1.

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/code-block-react

Je kunt de React component zo gebruiken:

import { CodeBlock } from "@nl-design-system-candidate/code-block-react";


export const MyPage = () => {
  return (
    <html>
      <body>
        function addNumbers(a, b) {
          return a + b;
        }
      </body>
    </html>
  );
};

Figma

De Figma component staat in NL Design System Voorbeeld Bibliotheek — Code Block.

Definition of Done

Implementaties

Community Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Component gebruiken?

Acceptatiecriteria

Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.

Als je implementatie voldoet aan de acceptatiecriteria voor deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA, en voor 2.5.5 Grootte van het aanwijsgebied uitgebreid) AAA.

Help component verbeteren

We vinden het belangrijk dat de component Code Block goed te gebruiken is door iedereen. Help je mee?