副業におすすめなサイトを見る→

【Angular】mat-dividerで線を引く方法を解説

angularのng-divider

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

mat-dividerを使っていい感じに線を引きたいなぁ…

この記事では上記の悩みを解決します。

実装するmat-dividerのイメージはこんな感じです。

タイトルとおすすめポイントの間に線があると思いますが、これです。これをmat-dividerを使って実装します。

詳しく確認したい方はyoteipickerというアプリで見れます。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

Contents

mat-dividerを導入する

mat-dividerを導入するには、Angular materialをまず導入しておきましょう。これはAngular materilaの公式から確認できます。

Angular materialが導入できたら、以下のようにMatDividerModuleをapp.module.tsにimportします。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Angular Material
import { MatDividerModule } from '@angular/material/divider';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDividerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

mat-dividerを適用する

モジュールのimportができたのであとは、dividerを好きなところに適用させれば冒頭の画像のようにいい感じに線が引けます。

例①

<div>
  <mat-divider></mat-divider>
</div>

例②

  <ul>
    <li>aaa</li>
    <mat-divider></mat-divider>
    <li>bbb</li>
    <mat-divider></mat-divider>
    <li>ccc</li>
    <mat-divider></mat-divider>
  </ul>

見えずらいかもですが、aaa、bbb、cccの各下にmat-dividerの線が引かれています。

  <div *ngFor="let item of items">
    <p>{{ item.name }}</p>
    <mat-divider></mat-divider>
  </div>

このようにngForを使って要素を展開し、mat-dividerを適用させても同じようなことが実装できます。

mat-dividerにcssを当てる

mat-dividerのCSSをカスタムしたい場合は、mat-dividerに当てればCSSが適用できます。

mat-divider {
  border: 3px solid red;
}

難しくないですね。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる