mat-dividerを使っていい感じに線を引きたいなぁ…
この記事では上記の悩みを解決します。
実装するmat-dividerのイメージはこんな感じです。
タイトルとおすすめポイントの間に線があると思いますが、これです。これをmat-dividerを使って実装します。
詳しく確認したい方はyoteipickerというアプリで見れます。
あわせて読みたい
ココナラ類似のおすすめサイトを徹底比較|実際に使ってみた経験談あり
この記事ではココナラに類似しているおすすめサイトを紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 ココナラに登…
あわせて読みたい
転職におすすめなサイト11選【リモート・フリーランスも対象】
転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！ この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
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;
}
難しくないですね。
あわせて読みたい
ココナラ類似のおすすめサイトを徹底比較|実際に使ってみた経験談あり
この記事ではココナラに類似しているおすすめサイトを紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 ココナラに登…
あわせて読みたい
転職におすすめなサイト11選【リモート・フリーランスも対象】
転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！ この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント