All Projects → SpiritSaint → nova-gridder

SpiritSaint / nova-gridder

Licence: other
Customize Nova Resource Details using Tailwind Grid System and more

Programming Languages

Vue
7211 projects
PHP
23972 projects - #3 most used programming language
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to nova-gridder

Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+21805.56%)
Mutual labels:  grid-system
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (+388.89%)
Mutual labels:  grid-system
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (+861.11%)
Mutual labels:  grid-system
Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+3844.44%)
Mutual labels:  grid-system
Indoorjs
Indoor mapping for floorplans using on fabricjs
Stars: ✭ 59 (+227.78%)
Mutual labels:  grid-system
Griddd
A dead simple, customisable, flexbox-based griddd
Stars: ✭ 108 (+500%)
Mutual labels:  grid-system
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (+1761.11%)
Mutual labels:  grid-system
css-grid-playground
A simple interface for experimenting with CSS Grid Layout.
Stars: ✭ 84 (+366.67%)
Mutual labels:  grid-system
Awesome Design Language System
list of awesome resources about digital design system.
Stars: ✭ 69 (+283.33%)
Mutual labels:  grid-system
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+772.22%)
Mutual labels:  grid-system
Gaintime
GainTime é um framework de HTML, CSS e JS para desenvolvimento de projetos responsivos, focado na simplicidade.
Stars: ✭ 19 (+5.56%)
Mutual labels:  grid-system
Vue Js Grid
🍱 Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
Stars: ✭ 866 (+4711.11%)
Mutual labels:  grid-system
Bootstrap4 Website
Website built with bootstrap 4 Framework
Stars: ✭ 124 (+588.89%)
Mutual labels:  grid-system
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+23950%)
Mutual labels:  grid-system
Ragrid
Intrinsic first auto-layout flexbox grid
Stars: ✭ 249 (+1283.33%)
Mutual labels:  grid-system
Von Grid
Hexagonal & square tile grid system with three.js
Stars: ✭ 336 (+1766.67%)
Mutual labels:  grid-system
Griz
Grid library for React; Rescue the cat
Stars: ✭ 99 (+450%)
Mutual labels:  grid-system
nova-rating-field
A Star rating field to use in your Laravel Nova apps.
Stars: ✭ 42 (+133.33%)
Mutual labels:  laravel-nova
nova-errors
Display all form errors in a modal at the top of the page.
Stars: ✭ 16 (-11.11%)
Mutual labels:  laravel-nova
Vue Comment Grid
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid
Stars: ✭ 143 (+694.44%)
Mutual labels:  grid-system

Nova Gridder

This package allows customize your resource details using grid and class systems.

Example

Example

Requirements

This package requires:

  • PHP ^7.3.
  • Laravel Nova ^2.0 or ^3.0.

Installation

You can install this package in a Laravel app that uses Nova via composer:

composer require demency/nova-gridder

Usage

Add the following code in your own resource implementation:

<?php

...

class YourResource extends Resource {

    ...

    public function fields(Request $request)
    {
        return [
            ...

            // Are you ready?
            // --------------
            // 1. Use gridder method
            // 2. Set options for rendering
            // 3. See the results
            Field::make(__('Column'), 'column') // Use whatever Field
                ->gridder([
                    'labelSize' => 'w-full',
                    'contentSize' => 'w-full',
                    'panelSize' => 'w-1/5', // Use field as box in a Panel
                    'additionalLabelClasses' => 'text-center',
                    'additionalContentClasses' => 'text-center py-2',
                    'additionalPanelClasses' => '', // This remove the border-bottom per field
                ])
        ];
    }

Changelog

1.0.1

  • Now support nova 3.0.
  • Some wrong type fixed.

1.0.0

  • Recently published.

Disclaimer

This package isn't tested. Feel free to make PR with improvements.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].