Krizaka
Documentation

Code block

A code sample: its language and file name, the code highlighted on the tokens (it scrolls sideways, never shrinks) and a copy button that says it copied — CodeTabs puts several build tools side by side.

WebBêtaBlocs

Web uniquement — React, depuis @krizaka/ui/code-block. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

  • Installation lines, a configuration file, the few lines a reader copies to start.
  • The same thing in Maven, Gradle and npm (CodeTabs).

Quand ne pas l’utiliser

  • For a word of code inside a sentence: use Ticks from the page entry.À la place : Page
  • For a keyboard shortcut.À la place : Kbd

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { CodeBlock, CodeTabs, highlight } from "@krizaka/ui/code-block";

Exemples

A file

A YAML sample in its file, with a comment and the copy button.

yamlapplication.yml
spring:
  application:
    name: billing # one name, used by logs and traces
krizaka:
  messaging:
    dead-letter: true

Build tools

CodeTabs: Maven and Gradle side by side.

xmlpom.xml
<parent>
  <groupId>com.krizaka</groupId>
  <artifactId>krizaka-parent</artifactId>
  <version>0.1.0</version>
</parent>

Props

CodeBlock

A code sample: language and file name, highlighted code that scrolls sideways, a copy button.

PropTypeDéfautDescription
coderequisstring—The code, as it is copied.
copiedLabelrequisstring—What the button says once the code is copied (announced politely).
copyLabelrequisstring—The copy button's words.
fileReactNode—The file it belongs in (pom.xml, application.yml), or what it is (Terminal).
highlightbooleantrueColours comments, strings, annotations, tags and keywords (the tokens' roles).
languagestringtextIts language, shown as a tag and used by the highlighter: xml, kotlin, ts, bash, yaml…

CodeTabs

Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples.

PropTypeDéfautDescription
labelrequisstring—What the tabs choose between (Build tool): the tab list's accessible name.
tabsrequisreadonly { id: string; label: ReactNode; content: ReactNode; }[]—The ways to write it: an id, the tab's words, its sample (a CodeBlock).
defaultValuestring—The tab open at first. Defaults to the first one.

Accessibilité

  • A figure whose caption is the file name; the button's label changes to the copied words in a polite live region.
  • The colours of the highlighter are the tokens' text roles (≥ 4.5:1 on the code surface, both themes).

Clavier

TouchesAction
TabFocuses the code, which then scrolls with the arrow keys; then the copy button.
Arrow keysIn CodeTabs, move between the tabs (Radix Tabs).

Bonnes pratiques

  • Show the file the lines belong in (pom.xml, application.yml); Terminal for a command.
  • Keep samples short enough to copy whole; link to the full file instead of pasting it.
  • The copy words arrive as props (copyLabel, copiedLabel).

Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Card grid

A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.

Decision list

The decisions behind a product, numbered: what was chosen, large, then side by side what was refused, why, and what it costs the reader — each with its mark and its colour.

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés