Code

Affichage de maquette de code pour les commandes de terminal et les extraits de code.

Import

import { Code } from 'asterui'

Exemples

Bloc de code de base

Maquette de code simple avec préfixe de commande.

</>

npm install asterui

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="$">npm install asterui</Code.Line>
      </Code>
    )
}

export default App

Lignes multiples

Bloc de code avec plusieurs lignes et différents préfixes.

</>

npm install asterui

installing dependencies...

added 42 packages

npm run dev

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="$">npm install asterui</Code.Line>
        <Code.Line prefix=">">installing dependencies...</Code.Line>
        <Code.Line prefix=">">added 42 packages</Code.Line>
        <Code.Line prefix="$">npm run dev</Code.Line>
      </Code>
    )
}

export default App

Numéros de ligne

Bloc de code avec préfixes de numéro de ligne.

</>

import React from 'react'

import { Button } from 'asterui'

export default function App() {

  return <Button>Click me</Button>

}

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="1">import React from 'react'</Code.Line>
        <Code.Line prefix="2">import {'{ Button }'} from 'asterui'</Code.Line>
        <Code.Line prefix="3"></Code.Line>
        <Code.Line prefix="4">export default function App() {'{'}</Code.Line>
        <Code.Line prefix="5">  return &lt;Button&gt;Click me&lt;/Button&gt;</Code.Line>
        <Code.Line prefix="6">{'}'}</Code.Line>
      </Code>
    )
}

export default App

Lignes surlignées

Bloc de code avec lignes surlignées pour l'emphase.

</>

function greet(name) {

  console.log('Hello, ' + name)

}

greet('World')

import { Code } from 'asterui'

function App() {
  return (
      <Code>
        <Code.Line prefix="1">function greet(name) {'{'}</Code.Line>
        <Code.Line prefix="2" highlight>  console.log('Hello, ' + name)</Code.Line>
        <Code.Line prefix="3">{'}'}</Code.Line>
        <Code.Line prefix="4"></Code.Line>
        <Code.Line prefix="5" highlight>greet('World')</Code.Line>
      </Code>
    )
}

export default App

Avec bouton de copie

Ajouter un bouton de copie avec la prop copyable.

</>

npm install asterui

import { Code } from 'asterui'

function App() {
  return (
      <Code copyable>
        <Code.Line prefix="$">npm install asterui</Code.Line>
      </Code>
    )
}

export default App

Bouton de copie (Multiligne)

Le bouton de copie fonctionne aussi avec plusieurs lignes.

</>

import { Button } from 'asterui'

export default function App() {

  return <Button>Click me</Button>

}

import { Code } from 'asterui'

function App() {
  return (
      <Code copyable>
        <Code.Line prefix="1">import {'{ Button }'} from 'asterui'</Code.Line>
        <Code.Line prefix="2"></Code.Line>
        <Code.Line prefix="3">export default function App() {'{'}</Code.Line>
        <Code.Line prefix="4">  return &lt;Button&gt;Click me&lt;/Button&gt;</Code.Line>
        <Code.Line prefix="5">{'}'}</Code.Line>
      </Code>
    )
}

export default App

API

Code

Propriété	Description	Type	Défaut
children	Contenu des lignes de code	React.ReactNode	-
copyable	Afficher le bouton de copie. Passer true pour extraire automatiquement le texte, ou une chaîne pour un texte de copie personnalisé	boolean | string	false
className	Classes CSS supplémentaires	string	-

Code.Line

Propriété	Description	Type	Défaut
children	Contenu de la ligne	React.ReactNode	-
prefix	Préfixe de ligne (par ex., $, >, numéro de ligne)	string	-
className	Classes CSS supplémentaires	string	-
highlight	Surligner cette ligne	boolean	false