rocket-preset-code-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.10 • Public • Published

    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.

    Example showing interactive tab picker for "package-managers"

    <noscript>

    Content is king! Users with JavaScript disabled get a gracefully degraded experience

    Example showing noninteractive listing of all tabs for "package-managers"

    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

    Install

    npm i rocket-preset-code-tabs

    DownloadsWeekly Downloads

    13

    Version

    0.2.10

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    31

    Last publish

    Collaborators

    • bennyp