Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bennypowers/codesandbox-button
Custom Element that Shows a CodeSandbox demo when you click on it.
https://github.com/bennypowers/codesandbox-button
Last synced: 21 days ago
JSON representation
Custom Element that Shows a CodeSandbox demo when you click on it.
- Host: GitHub
- URL: https://github.com/bennypowers/codesandbox-button
- Owner: bennypowers
- License: mit
- Created: 2020-01-20T19:49:28.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-05T02:57:01.000Z (about 1 year ago)
- Last Synced: 2024-10-05T07:55:51.334Z (about 1 month ago)
- Language: TypeScript
- Size: 2.32 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-lit - `<codesandbox-button>` - Custom Element that shows a CodeSandbox demo when you click on it. (Standalone Components)
README
## `codesandbox-button.js`:
### class: `CodesandboxButton`, `codesandbox-button`
#### Superclass
| Name | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` | | lit |
#### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ---------------- | ------- | --------------------- | -------- | ------------------------------------------------------ | -------------- |
| `fontSize` | | `number` | `14` | font size | |
| `hideNavigation` | | `boolean` | `false` | when true, hides navigation in the iframe | |
| `sandboxId` | | `string` | | five-character id of your sandbox | |
| `showDemo` | | `boolean` | `false` | when true, shows the CodeSandbox instead of the button | |
| `module` | | `string` | | path to the default module to display | |
| `theme` | | `'light'\|'dark'` | `'dark'` | | |
| `view` | | `'editor'\|'preview'` | | | |
#### Attributes
| Name | Field | Inherited From |
| ----------------- | -------------- | -------------- |
| `font-size` | fontSize | |
| `hide-navigation` | hideNavigation | |
| `sandbox-id` | sandboxId | |
| `show-demo` | showDemo | |
| `module` | module | |
| `theme` | theme | |
| `view` | view | |
Private API
#### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| -------------- | ------- | ----------- | ---------- | ------ | -------------- |
| `getIframeSrc` | private | | | | |
| `onClick` | private | | | | |
### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | -------------------- | ----------------- | --------------------- | ------- |
| `js` | `CodesandboxButton` | CodesandboxButton | codesandbox-button.js | |
| `custom-element-definition` | `codesandbox-button` | CodesandboxButton | codesandbox-button.js | |