https://github.com/formfcw/directus-extension-classified-group

A group to which a class can be assigned for custom styling
https://github.com/formfcw/directus-extension-classified-group

directus directus-custom-interface directus-extension group

Last synced: about 2 months ago
JSON representation

A group to which a class can be assigned for custom styling

• Host: GitHub
• URL: https://github.com/formfcw/directus-extension-classified-group
• Owner: formfcw
• License: gpl-3.0
• Created: 2023-10-20T07:24:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-17T13:22:32.000Z (9 months ago)
• Last Synced: 2025-04-10T19:29:22.246Z (2 months ago)
• Topics: directus, directus-custom-interface, directus-extension, group
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/directus-extension-classified-group
• Size: 806 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-directus - Classified Group - A group to which a class can be assigned for custom styling. (Extensions / Community)

README

        
# Classified Group Interface for Directus

A group to which a class can be assigned for custom styling.

## Installation

-   [Official Guide](https://docs.directus.io/extensions/installing-extensions.html)

-   [NPM Package](https://www.npmjs.com/package/directus-extension-classified-group)

## Examples

Example 1: Change spacing between fields

1. Add a classified group

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/tight-interface.png)

2. Add fields

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/tight-schema.png)

3. Add Custom CSS in the Project Settings

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/tight-css.png)

4. Result

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/tight-form.png)

Example 2: Add a border around fields

1. Add a classified group

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/bordered-interface.png)

2. Add fields

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/bordered-schema.png)

3. Add Custom CSS in the Project Settings

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/bordered-css.png)

4. Result

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/bordered-form.png)

Example 3: Place fields at the top of the directus_files collection

1. Add a classified group

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/top-interface.png)

2. Add fields

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/top-schema.png)

3. Add Custom CSS in the Project Settings

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/top-css.png)

4. Result

   ![](https://raw.githubusercontent.com/formfcw/directus-extension-classified-group/main/docs/top-form.png)