Tabs
Input component for rendering fieldsets as tabs
Sanity Tabs Plugin
Input component for rendering fieldsets as tabs
Compatibility
| Package Version | Sanity Version | | --------------- | -------------- | | 2.0.x | 2.0.x | | 1.4.x | 1.150.x |
How does it look?
Demo
Clone the original demo repository and run sanity start
to see how it works.
How do I use it?
Just add inputComponent: Tabs
to your field. Please note that the field type must be object
.
import Tabs from 'sanity-plugin-tabs';
export default {
type: 'document',
title: `Front Page`,
name: `frontPage`,
fields: [
{
name: 'content',
type: 'object',
inputComponent: Tabs,
fieldsets: [
{ name: 'main', title: 'Main', options: { sortOrder: 10 } },
{ name: 'aside', title: 'Aside', options: { sortOrder: 20 } },
{ name: 'meta', title: 'Meta', options: { sortOrder: 30 } },
],
options: {
// setting layout to object will group the tab content in an object fieldset border.
// ... Useful for when your tab is in between other fields inside a document.
layout: 'object',
},
fields: [
{
type: 'object',
name: 'mainTitle',
title: 'Main Title',
fieldset: 'main',
fieldsets: [{ name: 'ingress', title: 'Ingress' }],
fields: [
{
type: 'string',
name: 'header',
title: 'Header',
},
{
type: 'string',
name: 'ingressText',
title: 'Text',
fieldset: 'ingress',
},
],
},
{
type: 'string',
name: 'info',
title: 'Information',
fieldset: 'aside',
},
{
type: 'object',
name: 'aside',
fieldset: 'meta',
inputComponent: Tabs,
fieldsets: [
{ name: 'tags', title: 'Tags' },
{ name: 'categories', title: 'Categories' },
],
fields: [
{
type: 'string',
name: 'contentType',
title: 'Content Type',
fieldset: 'tags',
},
{
type: 'string',
name: 'category',
title: 'Category',
fieldset: 'categories',
},
],
},
],
},
],
};
Development
Run the following commands at the root of this repository.
npm i npm link
Now you can start developing the plugin.
To include it in your Sanity test site, navigate to the root folder of your CMS project and run:
npm link sanity-plugin-tabs
You will now reference the local version of the plugin when importing it as below:
import Tabs from 'sanity-plugin-tabs';
Debugging
To debug the plugin files in you then need to start Sanity with the flag --preserve-symlinks
as in the command below:
sanity start --preserve-symlinks
And then from the sanity-plugin-tabs
repository folder, run the project with:
npm run dev
Logging from the plugin is disabled by default, so if you'd like to see more detailed debug information, set the environment variable:
SANITY_STUDIO_PLUGIN_TABS_DEBUG=true
This can be easily done by creating a file called .env.development
next to your project's sanity.json
and adding the line above to that file.