sanity-plugin-tabs

    2.0.1 • Public • Published

    Sanity Tabs Plugin

    Input component for rendering fieldsets as tabs

    NPM version NPM Downloads

    Compatibility

    Package Version Sanity Version
    2.0.x 2.0.x
    1.4.x 1.150.x

    How does it look?

    Preview

    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: `Frontpage`,
      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 when using import Tabs from "sanity-plugin-tabs" in your files.

    To debug the plugin files in you then need to run sanity start --preserve-symlinks in your cms project, and npm run dev in your sanity-plugin-tabs repository folder.

    Install

    npm i sanity-plugin-tabs

    DownloadsWeekly Downloads

    1,659

    Version

    2.0.1

    License

    ISC

    Unpacked Size

    50.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • azzlack