Angular 10과 Firebase에서 블로그를 만들어 보는 10 (flex-layout으로 반응 대응해 본다)
※Angular10에 업데이트했기 때문에, 타이틀 바뀌고 있습니다
Angular9 => 10 업데이트 정보 공식 업데이트 가이드
Angular 버전
> ng "version"
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.0.8
Node: 12.16.3
OS: darwin x64
Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@angular/cdk 10.2.0
@angular/cli 10.0.8
@angular/fire 5.3.0
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.2.0
@ngtools/webpack 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.4
typescript 3.9.7
webpack 4.43.0
※Angular10에 버전 업하고 있습니다
설치
> ng "version"
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.0.8
Node: 12.16.3
OS: darwin x64
Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@angular/cdk 10.2.0
@angular/cli 10.0.8
@angular/fire 5.3.0
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.2.0
@ngtools/webpack 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.4
typescript 3.9.7
webpack 4.43.0
npm i -s @angular/flex-layout
FlexLayoutModule 가져오기
src/app/app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
・・・
imports: [
・・・
FlexLayoutModule,
TOP 페이지를 만지다
fxLayout 를 플렉스 레이아웃을 적용하는 요소에 부여합니다.row를 지정합니다 fxFlex 로 비율을 설정합니다.fxFlex="70"fxLayout.lt-sm="column"를 설정합니다.<div fxLayout="row" fxLayout.lt-sm="column">
<div class="contents news" fxFlex="70">
<app-top-news></app-top-news>
<div class="qiita">
<app-top-qiita></app-top-qiita>
</div>
</div>
<div class="contents twitter" fxFlex>
<app-top-twitter></app-top-twitter>
</div>
</div>
※fxFlex의 사용법은 여기
표시해보기
PC판 표시
모바일 버전 표시
마지막으로
이번에는 flex-layout을 사용하여 반응형 대응시켰습니다.
간단한 사용법 밖에 하지 않습니다만, 이것만으로도 PC/모바일로 표시를 나눌 수 있으므로 편리하네요.
이번에는 flex-layout을 사용하여 반응형 대응시켰습니다.
간단한 사용법 밖에 하지 않습니다만, 이것만으로도 PC/모바일로 표시를 나눌 수 있으므로 편리하네요.
Reference
이 문제에 관하여(Angular 10과 Firebase에서 블로그를 만들어 보는 10 (flex-layout으로 반응 대응해 본다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/teracy164/items/937ef62cbc38049a6646텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
