rocket-preset-code-tabs
Add tab elements for code blocks
Configuration
Add the preset to your rocket.config.js
, and configure it with a collections object. collections
is a record of collection names to tab types. For example, if you want code tabs which switch between install commands for npm
, yarn
, and pnpm
, add the following:
import { codeTabs } from 'rocket-preset-code-tabs';
export default {
presets: [
codeTabs({
collections: {
packageManagers: {
npm: { label: 'NPM', iconHref: '/_merged_assets/brand-logos/npm.svg' },
yarn: { label: 'Yarn', iconHref: '/_merged_assets/brand-logos/yarn.svg' },
pnpm: { label: 'PNPM', iconHref: '/_merged_assets/brand-logos/pnpm.svg' },
},
}
})
]
}
Usage
Now, to add a tab switcher to a page, write code blocks with the tab ${id}
directive, and wrap the set of tabs in a <code-tabs collection="package-managers" default-tab="npm">
element. You can indent the code blocks by one two spaces, but no more.
<code-tabs collection="package-managers" default-tab="npm">
```bash tab npm
npm i -S rocket-preset-code-tabs
```
```bash tab yarn
yarn add rocket-preset-code-tabs
```
```bash tab pnpm
pnpm add rocket-preset-code-tabs
```
</code-tabs>
Ad-Hoc Tabs
If you omit the collection
attribute, you can create an ad-hoc tab group by passing the tab name as the first argument to the tab directive
<code-tabs default-tab="my-element.js">
```js tab my-element.js
class MyElement extends HTMLElement {
static is = 'my-element';
}
customElements.define(MyElement.is, MyElement);
```
```json tab custom-elements.json
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "my-element.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "MyElement",
"tagName": "my-element",
"members": [
{
"kind": "field",
"name": "is",
"default": "'my-element'",
"static": true
}
],
"superclass": {
"name": "HTMLElement"
}
}
]
}
]
}
```
</code-tabs>
Results
With JavaScript enabled, users will be able to pick their preferred 'flavour', which persists across page loads via local storage.
<noscript>
Content is king! Users with JavaScript disabled get a gracefully degraded experience
Styling
Enjoy consistent site-wide theming by setting --markdown-syntax-background-color
and --markdown-table-row-odd-background-color
API Docs
rocket-preset-code-tabs.js
:
Functions
Name |
Description |
Parameters |
Return |
codeTabs |
Set up code tabs rocket preset |
options: CodeTabsOptions |
RocketPreset |
Exports
Kind |
Name |
Declaration |
Module |
Package |
js |
codeTabs |
codeTabs |
rocket-preset-code-tabs.js |
|
components/code-copy.ts
:
class: CodeCopy
Superclass
Name |
Module |
Package |
LitElement |
|
lit |
Static Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
is |
|
string |
'code-copy' |
|
|
styles |
|
array |
[ButtonHostStyles, CopyStyles] |
|
|
shadowRootOptions |
|
ShadowRootInit |
`{ |
|
|
mode: 'open',
delegatesFocus: true,
} | | | |
copyIcon | | | `` html
` `` | | |
Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
host |
|
HTMLElement |
this |
The element to copy text from. |
|
success |
|
string |
'pending' |
|
|
timeout |
|
number |
2000 |
Number of milliseconds to wait after successfully copying before restoring the copy button's icon to 'pending'. |
|
Methods
Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
render |
|
|
|
TemplateResult |
|
Events
Name |
Type |
Description |
Inherited From |
copy |
CustomEvent<string> |
when successfully copying |
|
CSS Properties
Name |
Default |
Description |
--code-button-active-color |
|
button background when focused |
--code-button-background |
var(--markdown-table-row-odd-background-color) |
button background |
--code-button-color |
inherit |
button text color |
--code-button-focus-background |
var(--primary-lines-color) |
button background when focused |
--code-button-focus-color |
inherit |
button text color when focused |
--code-border-radius |
6px |
border radius for code-copy and code-tabs |
CSS Parts
Name |
Description |
copy-button |
copy button |
Slots
Name |
Description |
copy-icon |
Button content |
success-icon |
Button content which alerts on copying. Use role="alert" if overriding default. |
Private API
Methods
Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
onCopy |
private |
|
|
Promise<void> |
|
Exports
Kind |
Name |
Declaration |
Module |
Package |
js |
CodeCopy |
CodeCopy |
components/code-copy.ts |
|
components/code-tabs.ts
:
class: CodeTabs
Superclass
Name |
Module |
Package |
LitElement |
|
lit |
Mixins
Name |
Module |
Package |
SelectMixin |
|
@pwrs/mixins/select/select-mixin |
Static Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
allowedChildren |
|
array |
['code-tab'] |
|
|
styles |
|
array |
[ButtonHostStyles, TabsStyles] |
|
|
keyboardMode |
|
string |
'tablist' |
|
|
Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
tabs |
|
NodeListOf<HTMLButtonElement> |
|
The tab buttons. |
|
defaultTab |
|
string |
|
Which tab name to treat as default, in case the use has not yet made a selection. |
|
align |
|
'start'|'end' |
'start' |
Tablist alignment |
|
collection |
|
string |
|
Which tab collection to use. |
|
onClickTab |
|
|
|
|
|
Methods
Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
firstUpdated |
|
|
changed: PropertyValues<this> |
Promise<void> |
|
updated |
|
|
changed: PropertyValues<this> |
void |
|
render |
|
|
|
TemplateResult |
|
selectId |
public |
|
idToSelect: string |
void |
|
CSS Properties
Name |
Default |
Description |
--code-tabs-icon-height |
|
size of the tab icon |
--code-tabs-tabs-background |
|
background for the tablist |
--code-tabs-justify-tabs |
|
flex justification for tab buttons. Alternatively, set the align attribute |
--code-tabs-min-height |
1px |
tabpanel minimum height |
--code-tabs-tabpanel-background |
var(--markdown-syntax-background-color, #f6f8fa) |
tabpanel background |
--code-tabs-background |
var(--markdown-syntax-background-color, #f6f8fa) |
content and selected button background |
--code-tabs-border |
1px solid var(--code-tabs-border-color, var(--primary-color)) |
border for code-tabs |
--code-tabs-border-color |
transparent |
border color for code-tabs |
--code-tabs-border-focus-color |
var(--primary-color) |
border color for code-tabs when focused |
--code-tabs-selected-highlight-color |
var(--markdown-link-color) |
color for selected tab highlight |
--code-button-active-color |
|
button background when focused |
--code-button-background |
var(--markdown-table-row-odd-background-color) |
button background |
--code-button-color |
inherit |
button text color |
--code-button-focus-background |
var(--primary-lines-color) |
button background when focused |
--code-button-focus-color |
inherit |
button text color when focused |
--code-border-radius |
6px |
border radius for code-copy and code-tabs |
CSS Parts
Name |
Description |
tablist |
container for tab buttons |
tabpanels |
container for content |
tab |
tab button |
default-container |
container for default tab |
Private API
Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
labels |
private |
|
new Map<string, Tab>() |
|
|
initialSelectedIndex |
protected |
number |
0 |
|
|
Methods
Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
getInitialSelectedIndex |
protected |
|
|
Promise<number> |
|
initCollection |
private |
|
|
|
|
onSlotchange |
private |
|
|
|
|
onSelect |
private |
|
|
void |
|
onClickTab |
private |
|
event: Event & { target: HTMLButtonElement } |
|
|
initLabels |
protected |
|
event: Event |
void |
|
class: CodeTab
Superclass
Name |
Module |
Package |
LitElement |
|
lit |
Static Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
styles |
|
array |
[TabStyles] |
|
|
Fields
Name |
Privacy |
Type |
Default |
Description |
Inherited From |
tab |
|
string |
|
|
|
noCopy |
|
boolean |
false |
|
|
Methods
Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
render |
|
|
|
TemplateResult |
|
CSS Properties
Name |
Default |
Description |
--code-button-active-color |
|
button background when focused |
--code-button-background |
var(--markdown-table-row-odd-background-color) |
button background |
--code-button-color |
inherit |
button text color |
--code-button-focus-background |
var(--primary-lines-color) |
button background when focused |
--code-button-focus-color |
inherit |
button text color when focused |
--code-border-radius |
6px |
border radius for code-copy and code-tabs |
CSS Parts
Name |
Description |
content |
container for tab content |
Exports
Kind |
Name |
Declaration |
Module |
Package |
js |
CodeTabs |
CodeTabs |
components/code-tabs.ts |
|
js |
CodeTab |
CodeTab |
components/code-tabs.ts |
|