Documentation
Webframe UI
Views
Codeexample

Code Example

A UI view to display live code example, along with source code used for generating that example.

Webframe documentation uses CodeExample to demo component usage, such as this.

All examples have a layout switch to toggle between LTR (Left to Right) and RTL (Right to Left) directions for testing.

Props

PropTypeDefaultDescription
children
String
|
Number
|
Boolean
|
Function
Required

Example source code

desc
String

Description text - default is "Example"

source
String

children as literal source code string for documentation

Autogenerate this using webframe-docs CLI.

Examples

Button.mdx
import { CodeExample } from '@webframer/ui/views/CodeExample.js'
 
<CodeExample desc='Button Example'
  source={`
  <Button>Click Me</Button>
`}>
  <Button>Click Me</Button>
</CodeExample>
Button Example
ViewsPropstable