https://github.com/darekf77/static-columns

Define columns with static width with Angular2 and FlexBox
https://github.com/darekf77/static-columns

angular-library pwa-demo

Last synced: about 1 month ago
JSON representation

Define columns with static width with Angular2 and FlexBox

• Host: GitHub
• URL: https://github.com/darekf77/static-columns
• Owner: darekf77
• License: other
• Created: 2016-08-04T09:29:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T11:23:31.000Z (9 months ago)
• Last Synced: 2024-05-01T14:52:20.303Z (9 months ago)
• Topics: angular-library, pwa-demo
• Language: TypeScript
• Homepage: https://darekf77.github.io/static-columns
• Size: 17.1 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# STATIC-COLUMNS - effortless Angular2+ layouts

# forget about flex box complicated rules !

With this simple library 

**angular / html columns with static width**

mixed with

 

**columns with responsive width**

 

are not a problem anymore!

---

### How to install:

```

    npm install static-columns --save

```

### Import it:

```ts

import { StaticColumnsModule } form "static-columns/browser"

```

### Put module inside angular imports:

```ts

@NgModule(

 // ... 

  imports: [StaticColumnsModule]

  // ... 

)

class MyExampleModule {

 // ... 

}

```

# Examples

	

 ## Basic usage:

```html

   

    something

  

                          

      ZAKRES

  

                          

      

      

      

  

```

![Modules marked](screen.png)

## Hide/show column in mobile view:

```html

  

      I am not visible when screen < 600px

  

                          

      I am visible only when screen < 600px

  

```

## Hide/show column in tablet view:

```html

  

      I am not visible when screen > 600px and < 840 px

  

                          

      I am visible only when screen > 600px and < 840 px

  

```

## Hide/show column in desktop view:

```html

  

      I am not visible when screen > 840 px

  

                          

      I am visible only when screen > 840 px

  

```