svelte-tabcontent

A fully-customizable tab UI component to go with your beautiful designs

Demo

• REPL

Installation

npm install svelte-tabcontent --save

Basic usage

<script>
  import TabContent from 'svelte-tabcontent'
</script>

<TabContent
  backgroundColor="orange"
  borderColor="brown"
  borderWidth={2}
  >
    <h1>What an awesone component !</h1>
</TabContent>

Props

| Prop | Type | Default | Description | | :----------------- | :---------------------------------- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | backgroundColor | CSS color | #BBB | The background color. | | borderColor | CSS color | #BBB | The border color. | | borderWidth | number | 0 | Border width in pixel. | | roundTop | number | 50 | Roundness aspect of the top curve (in %). | | roundBottom | number | 50 | Roundness aspect of the bottom curve (in %). | | curveWidth | number | 50 | Total width of the roundness part (in px). | | depth | number | 80 | Depth of the tab (in %). | | padding | number | 0 | x padding arround the content. | | inversed | boolean | false | Set to true to make it hand from above. | | align | string | 'center' | Align on the x axis ('left','center','right') | | shiftX | number | 0 | Shift on the x axis in px). | | pattern | string | null | SVG pattern element | patternId | string | 'pattern' | Name of the pattern element | | shapeVisible | boolean | true | Set to false for hidding the shape |

License

MIT