Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 3 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-03-08T08:49:16.000Z (11 months ago)
Last Synced: 2024-04-07T12:20:49.130Z (10 months ago)
Topics: directus, directus-custom-interface, directus-extension, group
Language: TypeScript
Homepage:
Size: 761 KB
Stars: 5
Watchers: 1
Forks: 0
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)
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)