expansion | components

Usage

left sidebar used Expansion in an astro file.

import { Expansion } from '@shawspring/astro-components';

<Expansion heading="assets">
  - css
  - image
  - js
</Expansion>

The code above generates the following tabs on the page:

assets

css
image
js

Customize style

set a custom class as a prefix to avoid css conflict, and promote the specificity.

import { Expansion } from '@shawspring/astro-components';

<Expansion heading="assets" class="custom-expansion">
  - css
  - image
  - js
</Expansion>

<style is:global>
    .custom-expansion {
    padding: 0 1rem;
        width: 50%;
        border: 1px solid #887766;
        border-radius: 1rem;
    }
    .custom-expansion .toggle {
        text-align: center;
        height: 3rem;
        line-height: 3rem;
    }
    .custom-expansion h2 {
        text-align: center;
    }
</style>

The code above generates the following tabs on the page:

assets

css
image
js

Props

export interface Props {
    /**
     * at least one children required for slot
     */
    children: any;
    heading: string;
    /**
     * initial expand state, default is true
     */
    expand?: boolean;
    /**
     *  custom class names appended to the component
     */
    class?: string;
}