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: 3 months 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-05T02:57:01.000Z (9 months ago)
• Last Synced: 2024-01-07T10:21:36.561Z (6 months ago)
• Language: TypeScript
• Size: 2.32 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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 |         |