Allow placing fields in a grid formation using ->size() helpers.

Last update: Jul 17, 2022

Nova Grid

Latest Version on Packagist Total Downloads

This Laravel Nova package allows you to create simple input filters.

Requirements

  • php: >=8.0
  • laravel/nova: ^4.0

Features

  • ->size() helpers that allow placing items next to one another on the detail and form views

Installation

Install the package in to a Laravel app that uses Nova via composer:

composer require outl1ne/nova-grid

Usage

Use ->size() on any Field.

public function fields(NovaRequest $request)
{
    return [
        Text::make('Email')
          ->size('w-1/12')
          ->sizeHalf(), // w-1/2
          ->sizeOneThird(), // w-1/3
          ->sizeTwoThirds(), // w-2/3
    ];
}

Credits

License

Nova Input Filter is open-sourced software licensed under the MIT license.

GitHub

https://github.com/outl1ne/nova-grid
You might also like...

grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

May 30, 2022

🧙‍♂️🔌 Responsive Magic Grid for Vue

🧙‍♂️🔌 Responsive Magic Grid for Vue

Vue-Magic-Grid This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example. If you use images, make sure they have a set

Aug 17, 2022

Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use

Jun 30, 2022

Responsive, Draggable & Resizable Dashboard (Grid) for Vue

vue-responsive-dash A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

Aug 8, 2022

:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

:bento:  Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Aug 10, 2022

Responsive grid system based on Bootstrap for Vue

Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

Jul 19, 2022

Virtual Scrolling Grid made for VueJS based on CSS grids.

Vue Virtual Grid Virtual Scrolling Grid made for VueJS based on CSS grids. NPM Package | Demo Website Render any Vue Component (images, iframes, conte

Jul 10, 2022

🧮 Generate basic CSS Grid code to make dynamic layouts!

🧮 Generate basic CSS Grid code to make dynamic layouts!

CSS Grid Generator Site: https://cssgrid-generator.netlify.com/ This project is a way for people to use CSS Grid features quickly to create dynamic la

Aug 13, 2022

Vue Repsonsive Grid Layout

VueResponsiveGridLayout 1.2.0 Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstr

Jan 18, 2022
Related tags
Layoutit grid is a CSS Grid layout generator
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Aug 10, 2022
vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

Feb 14, 2020
Vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

vue-grid-layout vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout Current version: 2.3.9 (Supp

Feb 22, 2022
For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter.

vue-gutter-resize language : jp For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter. demo Browsers support Chrome S

Dec 16, 2021
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

Aug 13, 2022
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Dec 20, 2021
A vuejs grid with draggable and resizable boxes

dnd-grid A vuejs grid with draggable and resizable boxes Demo page The demo requires Vue >= 2.3.0 because of the ":layout.sync" feature The components

Jul 17, 2022
Auto responsive grid layout library for Vue.
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

Aug 3, 2022
A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Oct 3, 2020
Lightweight set of functional grid components

vue-grid-styled Vue.js port of @jxnblk's React library, grid-styled Installation yarn add vue-grid-styled Default Theme // Breakpoints const breakpoin

Mar 11, 2021