CodeContainer

Introduction

The CodeContainer component is used to display code examples, providing toggle functionality between preview and code views, supporting multiple example tabs and code copying.

Component features:

• Supports switching between multiple example tabs
• Provides toggle between preview and code views
• Built-in code copying functionality
• Supports example titles and descriptions
• Responsive design, adapts to different screen sizes
• Style isolation to prevent external styles from affecting internal components

Basic Usage

The simplest code example display:

<CodeContainer codes={[YourComponentSourceCode]}>
  <div id="tab-1">
    <YourComponent />
  </div>
</CodeContainer>

Rendered result:

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';

const handleClose = () => {
  console.log('Alert closed!');
};
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>
<script define:vars={{ handleClose }}>
  // 实际的关闭事件由组件内部处理，这里只是为了演示
</script>

Multi-tab Examples

Display multiple related code examples:

---
import { CodeContainer } from './index';
import { Alert } from '../alert';

const infoCode = `<Alert type="info" title="Info Alert">
  This is an info alert
</Alert>`;

const successCode = `<Alert type="success" title="Success Alert">
  Operation completed successfully
</Alert>`;

const warningCode = `<Alert type="warning" title="Warning Alert">
  Please note potential risks
</Alert>`;

const errorCode = `<Alert type="error" title="Error Alert">
  Operation failed, please try again
</Alert>`;

const titles = ['Info', 'Success', 'Warning', 'Error'];
const descriptions = [
  'Used to display general information',
  'Used to display success status',
  'Used to display warning information',
  'Used to display error information',
];
const codes = [infoCode, successCode, warningCode, errorCode];
---

<CodeContainer titles={titles} descriptions={descriptions} codes={codes}>
  <div id="tab-1">
    <Alert type="info" title="Info Alert"> This is an info alert </Alert>
  </div>
  <div id="tab-2">
    <Alert type="success" title="Success Alert"> Operation completed successfully </Alert>
  </div>
  <div id="tab-3">
    <Alert type="warning" title="Warning Alert"> Please note potential risks </Alert>
  </div>
  <div id="tab-4">
    <Alert type="error" title="Error Alert"> Operation failed, please try again </Alert>
  </div>
</CodeContainer>

Rendered result:

<Alert type="info" title="信息提示">
  这是一条信息提示
</Alert>

<Alert type="success" title="成功提示">
  操作已成功完成
</Alert>

<Alert type="warning" title="警告提示">
  请注意可能的风险
</Alert>

<Alert type="error" title="错误提示">
  操作失败，请重试
</Alert>

Notes

1. Each example content must be contained in a div with id="tab-n", where n starts from 1
2. The length of the codes array must match the number of example contents
3. The lengths of the titles and descriptions arrays should be the same as the codes array, if provided
4. Example content can contain any valid HTML/CSS/JavaScript code