Code

Exibição de maquete de código para comandos de terminal e trechos de código.

Importação

import { Code } from 'asterui'

Exemplos

Bloco de Código Básico

Maquete de código simples com prefixo de comando.

</>

npm install asterui

import { Code } from 'asterui'

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

export default App

Múltiplas Linhas

Bloco de código com múltiplas linhas e prefixos diferentes.

</>

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

Números de Linha

Bloco de código com prefixos de número de linha.

</>

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

Linhas Destacadas

Bloco de código com linhas destacadas para ênfase.

</>

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

Com Botão de Copiar

Adicionar um botão de copiar com a 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

Botão de Copiar (Multilinha)

Botão de copiar funciona também com múltiplas linhas.

</>

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

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo das linhas de código	React.ReactNode	-
copyable	Mostrar botão de copiar. Passe true para extrair texto automaticamente, ou uma string para texto de cópia personalizado	boolean | string	false
className	Classes CSS adicionais	string	-

Code.Line

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo da linha	React.ReactNode	-
prefix	Prefixo da linha (ex: $, >, número de linha)	string	-
className	Classes CSS adicionais	string	-
highlight	Destacar esta linha	boolean	false