mat-dividerを使っていい感じに線を引きたいなぁ…
この記事では上記の悩みを解決します。
実装するmat-dividerのイメージはこんな感じです。
タイトルとおすすめポイントの間に線があると思いますが、これです。これをmat-dividerを使って実装します。
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;
}
難しくないですね。
エンジニアの基礎力を上げるおすすめ本を紹介！
- 30冊以上紹介(個人的に推し本の『仮説思考』の何が良かったかも書いています)
- エンジニアなら読むべき定番の技術本や思考力を上げるなど…多数の本を紹介
- AIの回答を判断できるための知識をつける本がたくさん
あわせて読みたい
エンジニアなら読むべきおすすめ本【2026年版の基礎力が身につく必読書】
「AIに聞けば答えは出る。でも、その答えの『正しさ』を判断する力はありますか？」 なかなか「正しく判断する力は私はある」と答えられる人は少なくなってきているので...
コメント