https://github.com/eea/volto-tabs-block
This add-on enables ad-hoc grouping of Volto blocks under sections and tabs
https://github.com/eea/volto-tabs-block
addons plone volto volto-addon volto-block volto-tabs
Last synced: 2 months ago
JSON representation
This add-on enables ad-hoc grouping of Volto blocks under sections and tabs
- Host: GitHub
- URL: https://github.com/eea/volto-tabs-block
- Owner: eea
- License: mit
- Created: 2020-08-04T11:47:23.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-12T15:13:32.000Z (3 months ago)
- Last Synced: 2025-04-10T09:19:57.696Z (2 months ago)
- Topics: addons, plone, volto, volto-addon, volto-block, volto-tabs
- Language: JavaScript
- Homepage:
- Size: 7.39 MB
- Stars: 5
- Watchers: 41
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-volto - volto-tabs-block - Split a Volto page into tabs, complete with editing form integration, using just a simple tabs block. (Addons / Layout addons)
README
# volto-tabs-block
[](https://github.com/eea/volto-tabs-block/releases)
[](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-tabs-block/job/master/display/redirect)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-master)
[](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-tabs-block/job/develop/display/redirect)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
[](https://sonarqube.eea.europa.eu/dashboard?id=volto-tabs-block-develop)
[Volto](https://github.com/plone/volto) add-on
## Features
#### IMPORTANT! Because this depends on @eeacms/volto-block-style, you should always load this addon as the last addon in Volto project configuration or after @eeacms/volto-block-style.
###
## Getting started
### Try volto-tabs-block with Docker
git clone https://github.com/eea/volto-tabs-block.git
cd volto-tabs-block
make
make start
Go to http://localhost:3000
### Add volto-tabs-block to your Volto project
1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
```Bash
docker compose up backend
```
1. Start Volto frontend
* If you already have a volto project, just update `package.json`:
```JSON
"addons": [
"@eeacms/volto-tabs-block"
],
"dependencies": {
"@eeacms/volto-tabs-block": "*"
}
```
* If not, create one:
```
npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --canary --addon @eeacms/volto-tabs-block
cd my-volto-project
```
1. Install new add-ons and restart Volto:
```
yarn
yarn start
```
1. Go to http://localhost:3000
1. Happy editing!
## Upgrade
### Upgrading to 7.0.0
Version 7 introduces the following breaking changes:
- The templates are now `variations` of the default template, so if you have custom templates,
you need to update them to be variations of the default template.
- All variations have `schema enhancers`, see https://github.com/eea/volto-eea-website-theme/blob/develop/src/index.js#L40
for example on how to customize the variation schema.
- Some defaults have been changed, see the `schema.js` files for any default values.
- Tabs now have the ability to reference an `Image` or use a `Semantic UI` icon within the tab title, even allowing the hiding
of the text title.
- Responsive template no longer uses `react-responsive-tabs` styles but use `accordion` classes when it's transformed into
accordion.
Bring your own style for the accordion if you want to customize it.
- Cleaned up styling in favor of `Semantic UI` styling and to bring your own styling.
- Better `i18n` support for the block especially in edit mode.
## Release
See [RELEASE.md](https://github.com/eea/volto-tabs-block/blob/master/RELEASE.md).
## How to contribute
See [DEVELOP.md](https://github.com/eea/volto-tabs-block/blob/master/DEVELOP.md).
## Copyright and license
The Initial Owner of the Original Code is European Environment Agency (EEA).
All Rights Reserved.
See [LICENSE.md](https://github.com/eea/volto-tabs-block/blob/master/LICENSE.md) for details.
## Funding
[European Environment Agency (EU)](http://eea.europa.eu)