ngx-responsive - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #llm #android #rust #deep-learning #linux #awesome-list #vue #pytorch #ios #mcp #open-source

ngx-responsive

(★ 292)

Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9

파일 탐색기

최종 버전 다운로드 (.zip)

- E2E.md
- - app.e2e-spec.ts
  - app.po.ts
  - tsconfig.e2e.json
- - favicon.ico
  - index.html
  - main.ts
  - polyfills.ts
  - styles.scss
  - test.ts
  - tsconfig.app.json
  - tsconfig.spec.json
- .editorconfig
- .gitignore
- angular.json
- browserlist
- package.json
- README.md
- tsconfig.app.json
- tsconfig.json
- tsconfig.spec.json
- tslint.json
- ng2-responsive-0-4-0-thin.jpg
- - index.ts
- - index.ts
- index.ts
- responsive.module.ts
.gitignore
.npmignore
.travis.yml
angular.json
CHANGELOG.md
CONTRIBUTING.md
LICENSE
ng-package.json
package.json
README.md
tsconfig.json
tslint.json
v4-0-1-to-v5-0-3.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ManuCutillas/ngx-responsive

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ngx-responsive

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i ngx-responsive --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i ngx-responsive@8.2.0 --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i ngx-responsive@7.0.1 --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i ngx-responsive@6.0.0 --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i ngx-responsive@5.0.8 --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# DEPRECATED LIBRARY - no longer actively maintained.

![ngx-responsive](https://raw.githubusercontent.com/ManuCutillas/ngx-responsive/master/img/ng2-responsive-0-4-0-thin.jpg)

# Introduction

Superset of **RESPONSIVE DIRECTIVES** to show or hide items according to the size of the device screen and another features in Angular 9.

```bash
npm i ngx-responsive --save
```

### If you use Angular 8 in your project.

```bash
npm i ngx-responsive@8.2.0 --save
```

### If you use Angular 7 in your project.

```bash
npm i ngx-responsive@7.0.1 --save
```

### If you use Angular 6 in your project.

```bash
npm i ngx-responsive@6.0.0 --save
```

### If you use Angular 5 in your project.

```bash
npm i ngx-responsive@5.0.8 --save
```

- Branch : [ngx-responsive@5.0.8](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)

### If you use Angular 4 in your project use ng2-responsive.

```bash
npm i ng2-responsive --save
```

- Branch : [ng2-responsive](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)

`RESPONSIVE_DIRECTIVES` provides the following features:

- Directives detecting states according to standard measures in BOOTSTRAP: xs / sm / md / lg / xl
- Directives that detect four states according to the real type of device: mobile / tablet / desktop / smartTv
- Custom sizes detector.
- Show and hide options.
- Custom breaking points.
- Debounce checking interval (default 100ms).
- Browsers Detect: Chrome / Safari / Firefox / IE / Opera
- Internet Explorer Versions Detect : IE 9 / IE 10 / IE 11 / IE +12
- New standard devices: iPhone, iPad, Android Mobile, Android Tablet, Windows Phone.
- Device orientation detect: portrait, landscape.
- Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, DeviceStandardInfo, BrowserInfo, IeInfo.
- Directive: responsive - Detection of multiple functions at once.
- Feature Responsive Directive - Boolean Events Emitter on change state:
- Feature responsive-window : Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
- UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object.
- **New Feature :** Reactive services that expose changes through observables:
  - BrowserInfoRx
  - IeInfoRx
  - DeviceInfoRx
  - DeviceStandardInfoRx
  - OrientationInfoRx
  - ResponsiveSizeInfoRx
  - UserAgentInfoRx

# How to start

#### 1. Installing the package via npm

```bash
  npm i ngx-responsive --save
  ```
#### 2. Bootstrap the service

- #### With default breaking points

```typescript
  import { NgModule } from '@angular/core'
  import { ResponsiveModule } from 'ngx-responsive'
  ...
  @NgModule({
      imports: [
        ResponsiveModule.forRoot()
      ],
      declarations: [
        AppComponent
      ],
      providers:[]
  })
  export class AppModule { }
  ```

- #### With custom Configuration

```typescript
    import { NgModule } from '@angular/core'
    import { ResponsiveModule } from 'ngx-responsive'
    ...
    const config = {
      breakPoints: {
          xs: {max: 600},
          sm: {min: 601, max: 959},
          md: {min: 960, max: 1279},
          lg: {min: 1280, max: 1919},
          xl: {min: 1920}
      },
      debounceTime: 100
    };
    ...
  @NgModule({
      imports: [
        BrowserModule,
        ResponsiveModule.forRoot(config)
      ],
      declarations: [
        AppComponent
      ],
      providers:[]
  })
  export class AppModule { }
  ```
  #### 2.1 DIRECTIVES:
  In your component to import the RESPONSIVE_DIRECTIVES only need import:
  ```typescript
  @Component({
    selector: 'my-component',
    template: `
      <p *showItStandard="['iphone','ipad']">I'll show you if I'm a iPhone or ipad device.</p>
      <p *isIphone>I'll show you if I'm a iPhone device.</p>
      <p *isChrome>I'll show you if I'm a chrome browser.</p>
      <p *xl>I'll show you if I'm a xl screen size.</p>
      <p *lg>I'll show you if I'm a lg screen size.</p>
      <p *md>I'll show you if I'm a md screen size.</p>
      <p *sm>I'll show you if I'm a sm screen size.</p>
      <p *xs>I'll show you if I'm a xs screen size.</p>
    `
  })
  ```

#### 3. ALL RESPONSIVE DIRECTIVES OPTIONS

- #### 3.1 Responsive Window directive.
  Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.

#### 3.1.1 First syntax

Define a named parrent element, the reference is stored on the service and available outside of the current container. Name must be unique to avoid conflicts

```html
  <div [responsive-window]="'parent'">
      <p *responsive="{ sizes:{  window: 'parent', min:900, max:1400} }">...</p>
  </div>
  ```

#### 3.1.2 Second syntax

Define a reference to the parent element

```html
    <div responsive-window #myContainerRef="container">
        <p *responsive="{ sizes: { min:900, max:1400 } } ; container:myContainerRef">...</p>
    </div>
  ```

Or:

```html
  <div responsive-window #myContainerRef="container">
    <ng-template [responsive]="{ sizes:{ min:900, max:1400 } }" [responsiveContainer]="myContainerRef">
        <p>....</p>
    </ng-template>
  </div>
  ```

- #### 3.2 New Detection of multiple functions at once.

All combinations
  
  ```typescript
    *responsive="{
      bootstrap: ['xl','lg','md','sm','xs'],
      browser: ['chrome','firefox','ie','safari', 'opera'],
      ie:['ie 9','ie 10','ie 11','ie +12'],
      pixelratio:['1x','retina','4k'],
      standard:['iphone','ipad','android mobile','android tablet','windows phone'],
      orientation:['landscape','portrait'],
      device: ['mobile','tablet','smarttv','desktop'],
      sizes:{min:900,max:1400}
    }"
  ```

\*Example in component

```typescript
  @Component({
    selector: 'my-component',
    template: `
      <p  *responsive="{
                      bootstrap: 'lg',
                      browser: ['chrome','firefox'],
                      pixelratio:'1x',
                      orientation:'landscape',
                      device: 'desktop',
                      sizes:{min:900,max:1400}
        }">I'll show you if all the options are true.</p>

<template  [responsive]="{
                      bootstrap: 'lg',
                      browser: ['chrome','firefox'],
                      pixelratio:'1x',
                      orientation:'landscape',
                      device: 'desktop',
                      sizes:{min:900,max:1400}
        }" (changes)="miMethod($event)">I'll show you if all the options are true & listen events changes.</template>
    `
    })
  ```

- #### 3.3 One function detect

- #### With Bootstrap Screen sizes

```typescript
    @Component({
      selector: 'my-component',
      template: `
        <p *xl>I'll show you if I'm a xl screen size.</p>
        <p *lg>I'll show you if I'm a lg screen size.</p>
        <p *md>I'll show you if I'm a md screen size.</p>
        <p *sm>I'll show you if I'm a sm screen size.</p>
        <p *xs>I'll show you if I'm a xs screen size.</p>
      `
      })
  ```

- #### With multiple combinations of bootstrap screen sizes and show / hide options
    - #### Strings Multiple combinations = "['xs','sm','md','lg','xl']"

```typescript
      @Component({
          selector: 'my-component',
          template: `
            <p *showItBootstrap="['md','xs']">I'll show you only in md and xs screen sizes.</p>
            <p *hideItBootstrap="['lg','sm']">I'll hide you only in lg and sm screen sizes.</p>
          `
      })
      ```

- #### With Devices Screen sizes

```typescript
      @Component({
            selector: 'my-component',
            template: `
              <p *isSmartTv>I'll show you if I'm a smartTv device.</p>
              <p *isDesktop>I'll show you if I'm a desktop device.</p>
              <p *isTablet>I'll show you if I'm a tablet device.</p>
              <p *isMobile>I'll show you if I'm a mobile device.</p>
            `
      })
      ```

- #### With multiple devices detect combinations: show / hide options.
    - #### Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']"

```typescript
      @Component({
          selector: 'my-component',
          template: `
            <p *showItDevice="['mobile','tablet']">I'll show you if I'm a tablet or a mobile device.</p>
            <p *hideItDevice="['mobile','tablet','desktop']">I'll hide you if I'm a desktop / tablet or mobile device.</p>
          `
      })
      ```

- #### With Standard Devices detect

```typescript
        @Component({
            selector: 'my-component',
            template: `
              <p *isIphone>I'll show you if I'm a iPhone device.</p>
              <p *isIpad>I'll show you if I'm a iPad device.</p>
              <p *isAndroidMobile>I'll show you if I'm a android mobile device.</p>
              <p *isAndroidTablet>I'll show you if I'm a android tablet device.</p>
              <p *isWindowsPhone>I'll show you if I'm a windows phone mobile device.</p>
            `
          })
      ```

- #### With multiple devices detect combinations: show / hide options.
    - #### Strings Multiple combinations = "['iphone','ipad','android mobile','android tablet','windows phone']"

```typescript
      @Component({
          selector: 'my-component',
          template: `
            <p *showItStandard="['android mobile','windows phone']">I'll show you if I'm a android mobile or a windows phone device.</p>
            <p *hideItStandard="['iphone','ipad']">I'll hide you if I'm a iPad or a iPhone device.</p>
          `
      })
      ```

- #### With orientation device

```typescript
      @Component({
          selector: 'my-component',
          template: `
            <p *isPortrait>I'll show you if I'm a portrait state.</p>
            <p *isLandscape>I'll show you if I'm a landscape state.</p>
          `
      })
      ```

- #### With custom sizes and show / hide options

```typescript
      @Component({
          selector: 'my-component',
          template: `
            <p *showItSizes="{min:955,max:1057}">I'll show you if responsive-window width is between the min and max.</p>
            <p *showItSizes="{min:750}">I'll show you if responsive-window width is greater than or equal to min.</p>
            <p *hideItSizes="{min:360,max:768}">It is hidden if responsive-window width between the min and max.</p>
          `
      })
      ```

- #### Responsive-window being window by default or any element set using the Responsive Window directive.

- #### With browser detection.

```typescript
      @Component({
          selector: 'my-component',
          template: `
            <p *isChrome>I'll show you if I'm a Chrome Browser.</p>
            <p *isFirefox>I'll show you if I'm a Firefox Browser.</p>
            <p *isSafari>I'll show you if I'm a Safari Browser.</p>
            <p *isOpera>I'll show you if I'm a Opera Browser.</p>
            <p *isIE>I'll show you if I'm a Internet Explorer Browser.</p>
          `
      })
      ```

- #### With multiple browsers detect combinations: show / hide options.
        - #### Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']"

```typescript
        @Component({
          selector: 'my-component',
          template: `
            <p *showItBrowser="['ie','opera']">I'll show you if I'm a IE or Opera Browser.</p>
            <p *hideItBrowser="['chrome','firefox','safari']">I'll hide you if I'm a Chrome, Firefox or Safari Browser.</p>
          `
        })
        ```

- #### With Internet Explorer Version detection.

```typescript
        @Component({
          selector: 'my-component',
          template: `
            <p *isIE9>I'll show you if I'm a Internet Explorer 9.</p>
            <p *isIE10>I'll show you if I'm a Internet Explorer 10.</p>
            <p *isIE11>I'll show you if I'm a Internet Explorer 11.</p>
            <p *isIE12>I'll show you if I'm a Internet Explorer 12.</p>
          `
        })
        ```

- #### With multiple Internet Explorer version detect: show / hide options.
        - #### Strings Multiple combinations = "['ie 9','ie 10','ie 11','ie +12']"

```typescript
        @Component({
          selector: 'my-component',
          template: `
            <p *showIEVersion="['ie 11','ie +12']">I'll show you if I'm a IE 11 browser or IE 12</p>
            <p *hideIEVersion="['ie 9','ie 10']">I'll hide you if I'm IE 9 browser or IE 10.</p>
          `
        })
        ```

- #### Get the userAgent info directive:
        Get the device, browser, os version and more from the user agent navigator in one event object.

```html
        <user-agent-info (info)="thisUserAgent($event)"></user-agent-info>
        ```

#### 4. FORMAT OF USER AGENT INFO OBJECT

Description of the object given by the `(info)` event of the directive `user-agent-info`
(usage: `<user-agent-info (info)="thisUserAgent($event)"></user-agent-info>`).

```js
{
  device: 'mobile' | 'tablet' | 'smarttv' | 'desktop',
  browser: 'chrome' | 'firefox' | 'ie' | 'safari' | 'opera' | 'silk' | 'yandex' | 'NA',
  pixelratio:  '4k' | 'retina' | '1x',
  ie_version: {
      name: 'ie 7' | 'ie 8' | 'ie 9' | 'ie 10' | 'ie 11' | 'ie +12',
      state: true | false
  },
  game_device: {
      name:  'Playstation 4' | 'Playstation 3' | 'Xbox one' | 'Xbox' | 'Wii' | 'Wii U' | 'Nintendo 3DS' | 'Playstation Vita' | 'PSP'
      state: true | false
  },
  smart_tv: {
      name:  'Chromecast' | 'Apple tv' | 'Google tv' | 'Xbox One' | 'Playstation 4' | 'Generic smartv'
      state: true | false
  },
  desktop: {
      name:  'Windows' | 'Mac' | 'Linux',
      state: true | false
  },
  tablet: {
      name:  'Ipad' | 'Android' | 'Kindle' | 'Generic Tablet',
      state: true | false
  },
  mobile: {
      name:  'Iphone' | 'Android' |  'Windows Phone' | 'Blackberry' | 'Generic Mobile'
      state: true | false
  },
  window_os: {
      name:  'Windows XP' | 'Windows Vista' | 'Windows 7' | 'Windows 8' | 'Windows 10' | 'Generic Windows'
      state: true | false
  },
  linux_os: {
      name:  'Debian' | 'Knoppix' | 'Mint' | 'Ubuntu' | 'Kubuntu' | 'Xubuntu' | 'Lubuntu' | 'Fedora' | 'Red hat' | 'Mandriva' | 'Gentoo' | 'Sabayon' | 'Slackware' | 'Suse' | 'CentOS' | 'Backtrack' | 'Generic Linux',
      state: true | false
  },
  bot: true | false
}
```

# NEXT STEPS

- Unit test and e2e.
- Create a documentation page.
- Work in demo page
- Directive css classes:

```html
<h1 *responsive-css="{
  bootstrap: {xl: 'micssclassxl', lg: 'micssclasslg'},
  orientation:{landscape: 'micssclasslandscape'}
}"></h1>

```

- animations show/hide in directives

# Contributors

- Manu Cutillas
- Christophe HOARAU
- Kamil Breguła
- Janne Julkunen
- phransyz
- Michael Burger
- Alyssa Brunswick
- Quentin
- Thomas Christensen
- lydemann
- MattSenter

# License

[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)