New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@marxlnfcs/ngx-grid

Package Overview
Dependencies
Maintainers
0
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@marxlnfcs/ngx-grid

Angular library to create a simple grid layout

  • 2.5.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
0
Weekly downloads
 
Created
Source

Angular Grid System

Angular library to create a simple grid layout

NPM Version Package License NPM Downloads Package Size

ngx-grid

Installation

npm i @marxlnfcs/ngx-grid

Usage


Module:

Import NgxGridModule from @marxlnfcs/ngx-grid

import { NgxGridModule } from '@marxlnfcs/ngx-grid-alt';

@NgModule({
  imports: [
    NgxGridModule.forRoot({ ... })
  ]
})

Grid component

Simple component to build a dynamic and easy to use grid layout

<ngx-grid>
  <ngx-grid-column>...</ngx-grid-column>
  <ngx-grid-column>...</ngx-grid-column>
  <ngx-grid-group>
    <ngx-grid-column>...</ngx-grid-column>
    <ngx-grid-column>...</ngx-grid-column>
  </ngx-grid-group>
</ngx-grid>

Options for Grid component: <ngx-grid>
  • strategy - Defines the strategy of the grid component. SCREEN uses the media queries and CONTAINER uses the container queries which is experimental, Possible values: screen, container
  • baseBreakpoint - Defines the base breakpoint of this component. (default is xs), Possible values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl
  • baseSize - Defines the default column size of the grid. (default is 12), Possible values: 2, 4, 6, 8, 10, 12
  • gap - Sets the spacing between all columns and rows. (default is 1rem)
  • columnGap - Sets the spacing between all columns. (default is the value of the gap option)
  • rowGap - Sets the spacing between all rows. (default is the value of the gap option)
  • autoRows - Whether to use the grid-auto-rows feature. (default is false)
  • rows - Accepts a list of strings to define the size of each row statically. (default is null)

Options for the grid column directive: <ngx-grid-column>

For every directive there are multiple size, offset and order options for each breakpoint. The [size], [offset] and [order] input uses the current base breakpoint.

Breakpoints: xs, sm, md, lg, xl, 2xl, 3xl and 4xl Sizes: 1-12 Offset sizes: 2, 4, 6, 8, 10

  • size - Sets the width (1-12) of the column. (default is 12)
  • *:size - Sets the width (1-12) of the column. (default is 12)
  • offset - Sets the distance from the left. (default is null)
  • *:offset - Sets the distance from the left. (default is null)
  • order - Sets the position of the column. (default is null)
  • *:order - Sets the position of the column. (default is null)

Options for the grid group directive: <ngx-grid-group>

For every directive there are multiple size, offset and order options for each breakpoint. The [size], [offset] and [order] input uses the current base breakpoint.

Breakpoints: xs, sm, md, lg, xl, 2xl, 3xl and 4xl Sizes: 1-12 Offset sizes: 2, 4, 6, 8, 10

  • gap - Sets the spacing between all columns and rows. (default is 1rem)
  • columnGap - Sets the spacing between all columns. (default is the value of the gap option)
  • rowGap - Sets the spacing between all rows. (default is the value of the gap option)
  • autoRows - Whether to use the grid-auto-rows feature. (default is true)
  • rows - Accepts a list of strings to define the size of each row statically. (default is null)
  • size - Sets the width (1-12) of the column. (default is 12)
  • *:size - Sets the width (1-12) of the column. (default is 12)
  • offset - Sets the distance from the left. (default is null)
  • *:offset - Sets the distance from the left. (default is null)
  • order - Sets the position of the column. (default is null)
  • *:order - Sets the position of the column. (default is null)

Grid centered component

Simple component to center a specific size of container

<ngx-grid-centered>
  ...
</ngx-grid-centered>

Options for the grid centered component: <ngx-grid-centered>

For every breakpoint, there is a native size option. The [size] input uses the current base breakpoint.

Breakpoints: xs, sm, md, lg, xl, 2xl, 3xl and 4xl Sizes: 1-12

  • size - Sets the width (1-12) of the column. (default is 12)
  • *:size - Sets the width (1-12) of the column. (default is 12)
  • autoRows - Whether to use the grid-auto-rows feature. (default is false)

*ngxScreenSize structural directive

Structural directive to add/remove an element if the defined breakpoint fits.

<div *ngxScreenSize"'xs'">
...
</div>

[.class] and [.style] directive

Directive to add classes and/or styles based on the breakpoint

<div
  [xs.class]="'class1, class2'"
  [xs.class]="['class1', 'class2']"
  [xs.class]="{ class1: true, class2: true }"

  [xs.style]="'display: none; color: black;'"
  [xs.style]="['display: none', 'color: black; background-color: green;']"
  [xs.style]="{ 'display': 'none', 'color': 'black' }"
>
  ...
</div>

Global Options


In the forRoot method when importing the grid module in the app module you can specify the following options that will be globally applied to all grid instances.

  • strategy - Defines the strategy of the grid component. SCREEN uses the media queries and CONTAINER uses the container queries which is still experimental, Possible values: screen, container
  • baseBreakpoint - Defines the base breakpoint of this component. (default is xs), Possible values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl
  • baseSize - Defines the default column size of the grid. (default is 12), Possible values: 2, 4, 6, 8, 10, 12
  • gap - Sets the spacing between all columns and rows. (default is 1rem)
  • columnGap - Sets the spacing between all columns. (default is the value of the gap option)
  • rowGap - Sets the spacing between all rows. (default is the value of the gap option)
  • autoRows - Whether to use the grid-auto-rows feature. (default is false)
  • breakpoints - Key-Value object with name of breakpoint as key and minWidth as number

Keywords

FAQs

Package last updated on 17 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc