# @giwisoft/wc-tabs

> Tabs component

Latest version **1.0.10** (published 2020-10-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @giwisoft/wc-tabs
pnpm add @giwisoft/wc-tabs
yarn add @giwisoft/wc-tabs
bun add @giwisoft/wc-tabs
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-10-08 |
| First published | 2018-12-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 353.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Giwi |
| Maintainers | giwi |
| Keywords | web, web components |

## Links

- npm: https://www.npmjs.com/package/@giwisoft/wc-tabs
- Repository: https://github.com/Giwi/wc-tabs
- Issues: https://github.com/Giwi/wc-tabs/issues
- npm.io page: https://npm.io/package/@giwisoft/wc-tabs

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2020-10-08
- 1.0.9 — 2020-10-08
- 1.0.8 — 2020-09-28
- 1.0.7 — 2020-06-15
- 1.0.6 — 2020-06-15
- 1.0.5 — 2019-11-25
- 1.0.4 — 2019-11-22
- 1.0.3 — 2019-10-16
- 1.0.2 — 2019-10-15
- 1.0.1 — 2019-10-14
- 1.0.0 — 2019-10-14
- 0.0.10 — 2019-09-27
- 0.0.9 — 2019-09-26
- 0.0.7 — 2019-05-10
- 0.0.6 — 2019-05-10
- … 5 more at https://npm.io/package/@giwisoft/wc-tabs/versions

## README

# wc-tabs


Simple tabs component

```html
<wc-tabs selection="1">
  <wc-tabs-header slot="header" name="tab1">Tab 1</wc-tabs-header>
  <wc-tabs-header slot="header" name="tab2">Tab 2</wc-tabs-header>
  <wc-tabs-header slot="header" name="tab3" disabled="true">Tab 3</wc-tabs-header>

  <wc-tabs-content slot="content" name="tab1">Content tab 1</wc-tabs-content>
  <wc-tabs-content slot="content" name="tab2" responsive="true">Content tab 2</wc-tabs-content>
  <wc-tabs-content slot="content" name="tab3">Content tab 3</wc-tabs-content>
</wc-tabs>
```

## Properties

`selection` property is not mandatory. Default selection is the first tab (0).

`selection` can be changed externaly anytime to force tab selection.

`selection` is applied modulus the number of tab.


## CSS vars

| Name | Description | Default |
| --- | --- | --- |
| --wc-tab-header-border-color | Outline border color | #dee2e6 |
| --wc-tab-header-bg-color | Header default background color | transparent |
| --wc-tab-header-color | Header default font color | #007bff |
| --wc-tab-header-selected-color | Selected header font color | #495057 |
| --wc-tab-header-selected-bg-color | Selected header background color | #fff |
| --wc-tab-header-selected-border-color | Selected header border color | #dee2e6 |
| --wc-tab-header-disabled-color | Disabled header font color |
| --wc-tab-header-disabled-bg-color | Disabled header background color | transparent |

## wc-tabs-content

### Properties
| Property     | Attribute    | Description | Type      | Default     |
| ------------ | ------------ | ----------- | --------- | ----------- |
| `name`       | `name`       |             | `string`  | `undefined` |
| `responsive` | `responsive` |  when set, force the div dimensions to 100%           | `boolean` | `false`     |

### Methods

#### `getChild() => Promise<IWcTabContentData>`

##### Returns

Type: `Promise<IWcTabContentData>`

## wc-tabs-header

### Properties

| Property   | Attribute  | Description | Type      | Default     |
| ---------- | ---------- | ----------- | --------- | ----------- |
| `disabled` | `disabled` |             | `boolean` | `undefined` |
| `name`     | `name`     |             | `string`  | `undefined` |


### Events

| Event      | Description | Detail |
| ---------- | ----------- | ------ |
| `onSelect` |             | void   |


### Methods

#### `getChild() => Promise<IWcTabHeaderData>`

##### Returns

Type: `Promise<IWcTabHeaderData>`

---
_Source: https://npm.io/package/@giwisoft/wc-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._