open-index/open-npm huggingface dataset:
npm package: @shapla/vue-tabs
Description: A simple responsive horizontal navigation tabs component based on Bulma Tabs for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Tabs

A simple responsive horizontal navigation tabs component based on Bulma Tabs for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-tabs
```

# Usage

### Styles

with Sass:

```js
import '@shapla/vue-tabs/src/index.scss';
```

with CSS:

```js
import '@shapla/vue-tabs/dist/style.css';
```

### Javascript Instantiation

```js
import {ShaplaTabs, ShaplaTab} from '@shapla/vue-tabs';

export default {
  name: 'Hello',

  components: {ShaplaTabs, ShaplaTab},
}

```

```html
<shapla-tabs fullwidth>
  <shapla-tab name="Tab 1" selected>
    Tab One Content
  </shapla-tab>
  <shapla-tab name="Tab 2">
    Tab Two Content
  </shapla-tab>
</shapla-tabs>
```

### Props for `ShaplaTabs`

| Property      | Type     | Required  | Default    | Description                                                       |
|---------------|----------|-----------|------------|-------------------------------------------------------------------|
| `alignment`   | String   | **no**    | `left`     | Possible value can be `left`, `center` or `right`.                |
| `size`        | String   | **no**    | `default`  | Possible value can be `default`, `small`, `medium` or `large`.    |
| `tabStyle`    | String   | **no**    | `default`  | Possible value can be `default`, `boxed`, `rounded` or `toggle`.  |
| `fullwidth`   | Boolean  | **no**    | `false`    | If set `true`, the tabs will take up available full width.        |

### Props for `ShaplaTab`

| Property      | Type      | Required  | Default   | Description                               |
|---------------|-----------|-----------|-----------|-------------------------------------------|
| `name`        | String    | **yes**   | `true`    | Tab title.                                |
| `selected`    | Boolean   | **no**    |  `false`  | Set true if you to keep open by default.  |
npm package: @shapla/vue-toggles
Description: A simple accordion/toggle component for Vue 3
Author: Sayful Islam
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shapla Toggles

A simple accordion/toggle component for Vue 3

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

```
npm install --save @shapla/vue-toggles
```

# Usage

Add the component:

```js
import {ShaplaToggles, ShaplaToggle} from '@shapla/vue-toggles';

export default {
  name: 'Hello',
  components: {ShaplaToggles, ShaplaToggle}
}

```

```html

<shapla-toggles>
  <shapla-toggle name="Toggle One" :selected="true">
    <!-- content -->
  </shapla-toggle>
  <shapla-toggle name="Toggle Two">
    <!-- content -->
  </shapla-toggle>
</shapla-toggles>
```

### Props for `ShaplaToggles`

| Property      | Type      | Required  | Default   | Description                                                                                        |
|---------------|-----------|-----------|-----------|----------------------------------------------------------------------------------------------------|
| `accordion`   | Boolean   | **no**    |  `true`   | If you set `false`. All toggle components can be opened. Otherwise opening one will close another. |
| `iconPosition`| String    | **no**    |  `left`   | Value can be `left` or `right`.                                                                    |
| `boxedMode`   | Boolean   | **no**    |  `true`   | Set `false` if you don't want border on all side.                                                  |
| `showDivider` | Boolean   | **no**    |  `true`   | Only works when `boxedMode` is `false`. Remove all borders.                                        |

### Props for `ShaplaToggle`

| Property      | Type      | Required  | Default   | Description                               |
|---------------|-----------|-----------|-----------|-------------------------------------------|
| `name`        | String    | **yes**   | `true`    | Toggle title.                             |
| `subtext`     | String    | **yes**   | `true`    | Toggle subtitle.                          |
| `selected`    | Boolean   | **no**    |  `false`  | Set true if you to keep open by default.  |