【Ionic/Angular】Android Studioの初期設定で少し躓いたところ
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
【Ionicで作る モバイルアプリ制作入門[Angular版]】を参考にモバイルアプリ開発に手を出しました。Angularでさえまともなレベルじゃないのに手を出して良かったのかな…
最初の開発環境のところで少しだけ躓いたところがあったので備忘録として書いていきます。が、アプリの指示通りにしていたらまず大丈夫だと思いますので、この記事を見てIonic難しいとかは思わないでくださいね笑
Android Studioの初期設定で少し躓いたところ
１ ライセンスが許可されていないため一部のAndroid SDKパッケージのインストールに失敗した
ERROR: Failed to install the following Android SDK packages as some licences have not been accepted.
build-tools;28.0.3 Android SDK Build-Tools 28.0.3
platforms;android-28 Android SDK Platform 28
To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html
Using Android SDK: /Users/ryuzan/Library/Android/sdk
Install missing SDK package(s)
解決方法
Install missing SDK package(s)
ここをクリックする。
common.jarをダウンロードしていない
ERROR: Unable to resolve dependency for ':capacitor-android@debug/compileClasspath': Could not download common.jar (android.arch.lifecycle:common:1.1.1)
Show Details
Affected Modules: capacitor-android
解決方法
Android Studioを再起動させる。
USBデバッグが無効になっている
今回はMacとAndroidをUSBで繋げて、アプリ画面をAndroidに表示させようとした時に躓いたところです。
For ADB to recognize your device as a target for deploying debuggable APKs, you must first enable USB debugging in the on-device developer options.
Depending on the version of Android you're using, proceed as follows:
◆On Android 8.0 and higher, go to Settings > System > About phone and tap Build number seven times.
◆On Android 4.2 through 7.1.2, go to Settings > About phone and tap Build number seven times.
Return to the main Settings menu to find Developer options at the bottom. In the Developer options menu, scroll down and enable USB debugging.
解決方法
Android8.0以上で以下の操作を行う。
Settings > System > About phone and tap Build number seven times.
設定>システム>電話情報にある「ビルド番号」を7回押す。
そうすると、どこかに「開発者向けオプション」が表示されます。私の場合は、設計>システムに「開発者向けオプション」が出現しました。
最後に「開発者向けオプション」のUSBデバッグを有効にします。
今後に向けて
まずは本の内容を実践していきたいと思ってます。
【Angular/TypeScript】Spread Operator(...)【ドット3つ】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
Angular After Tutorialに取り組んでいると、見慣れない「...(ドット3つ)」が出てきたので備忘録として記事にまとめます。
Spread Operator(...)
意味
早速ですが、参考資料から。
Spread Operator - TypeScript Deep Dive 日本語版
上記のサイトを参考にすると、【...は演算子で、配列またはオブジェクトの要素(中身)を展開する】ことができるみたいです。
たぶんイマイチ理解できていないと思います。スプレッド演算子を理解するには、例を見るのが最も分かりやすいとのことなので、次の項目で例を挙げていきます。
使い方
配列の代入(Array Assignment)
function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args); // foo.apply(null, args);と同じ結果
applyのthis引数にnullを渡さなくてもすむようになりました。
配列の代入(Array Assignment)
var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]
オブジェクトの展開(Object Spread)
const point2D = {x: 1, y: 2};
const point3D = {...point2D, z: 3}; // {x: 1, y: 2, z: 3}
const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}
Object.assignのような使い方もできるみたいです。これは便利。
今後に向けて
Angular After Tutorialでは、Storeサービスのupdateメソッドから受け取ったstateオブジェクトを展開して、userListオブジェクトに格納するために使っていましたね。
見慣れない構文だったので面倒臭くなりそうだなと思っていましたが、調べてみるととても便利な演算子であることが分かりました。
これからはどんどん使っていきたいと思います。
参考
素晴らしい記事に感謝いたします。
【Angular】Excelやスプレッドシートのような表を作ってみた⑥【テキスト修正時のフォント色変更(クラス付与)編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事のラスト(第6回目)です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第5回 要素(div/input)切り替え(スタイルバインディング)編
・第6回 テキスト修正時のフォント色変更(クラス付与)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
テキスト修正時のフォント色変更(クラス付与)編
テーマ
今回はテキストを修正した時に、フォント色を赤に変更させます。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
left_column: [ "FirstName", "Hobby2"],
right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
details: { 'ユニークキー':"abc1", Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
info: { info1: "", info2: "" },
details: { 'ユニークキー':"abc2", Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
コード
component.html
<div class="person-table">
・・・・・・
+ <input type='text'
class="{{person['ユニークキー'] + column}}"
[(ngModel)]='person[column]'
[style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'"
(blur)="toggleVisible(person['ユニークキー'], column)"
(change)="addFontRedClass(person['ユニークキー'], column)"
>
+ <div class="{{person['ユニークキー'] + column}}"
[style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'"
(dblclick)="toggleVisible(person['ユニークキー'], column)"
>
・・・・・・
</div>
<div class="right-person-table">
・・・・・・
+ <input type='text'
class="{{person['ユニークキー'] + column}}"
[(ngModel)]='person[column]'
[style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'"
(blur)="toggleVisible(person['ユニークキー'], column)"
(change)="addFontRedClass(person['ユニークキー'], column)"
>
+ <div class="{{person['ユニークキー'] + column}}"
[style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'"
(dblclick)="toggleVisible(person['ユニークキー'], column)"
>
・・・・・・
</div>
component.ts
+ import { DOCUMENT } from '@angular/common';
export class PersonComponent implements OnInit {
・・・・・・・・・・
+ constructor(@Inject(DOCUMENT) private document: any) { }
ngOnInit() {
・・・・・・・・・・
+ addFontRedClass(uniqueKey, column) {
+ const className = uniqueKey + column;
+ const inputClass = 'input[class^="' + className + '"]';
+ const inputEl = this.document.querySelector(inputClass);
+ if (inputEl) {
+ inputEl.classList.add('change-data');
+ }
+ const divClass = 'div[class*="' + className + '"]';
+ const divEl = this.document.querySelector(divClass);
+ if (divEl) {
+ divEl.classList.add('change-data');
+ }
+ }
}
component.scss
.change-data {
color: red;
}
ポイント
物凄く見にくくてすみません。。。
今回は特にポイントはありません。要素を指定してあげて、クラスを付与するだけです。
逆にquerySelectorメソッドを使うのが正解なのか不安・・・
Elementを探さずに、classを付与する方法がありそう。
今後に向けて
この表を作るのに、自分は1ヶ月程かかりました。上司は1週間程で作れるとのこと。
しかし、こうやって冷静にまとめてみると、1日でもできそうな気がします。
無知ゆえの仕事の遅さですね。
日頃から勉強して、いついかなる時でも大体の仕様が頭に思い浮かぶようになりたいものです。できれば、さらにその場でアウトプットできるようになりたいです。
【Angular】Excelやスプレッドシートのような表を作ってみた⑤【要素(div/input)切り替え(スタイルバインディング)編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第5回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
要素(div/input)切り替え(スタイルバインディング)編
テーマ
今回はdiv要素とinput要素の表示をスタイルバインディングを使って切り替えていきたいと思います。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
今回はデータにユニークキーを増やしています。
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
left_column: [ "FirstName", "Hobby2"],
right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
+ details: { "ユニークキー":"abc1", Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
+ info: { info1: "", info2: "" },
details: { "ユニークキー":"abc2", Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
なぜindexを使わない？
同じ列名を表示させるテーブルをいくつも表示させる場合に対応させるためです。列名とindexだけでデータを探しても、一意にはならないため複数のデータが見つかってしまいます。
person毎にユニークキーを設定しておけば、列名とユニークキーでデータを探すことができるので、indexを使いませんでした。
なぜngIfディレクティブを使わない？
今回の備忘録シリーズの中では詳しく触れていないのですが、描画時に前回修正があった場合もテキストを赤字に変更する機能を付けています。
テキストを赤字に変更する流れは、
DBからデータ取得→修正の有無確認→修正があった場合はクラス付与
になります。
しかし、ngIfディレクティブは要素自体を表示させないため、上記のクラス付与において最初は非表示にさせているinput要素を検索することができず、クラス付与ができなくなるので、今回はngIfディレクティブを使用していません。
コード
component.html
<div class="person-table">
・・・・・・
+ <input type='text' [(ngModel)]='person[column]' [style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'" (blur)="toggleVisible(person['ユニークキー'], column)">
+ <div [style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'" (dblclick)="toggleVisible(person['ユニークキー'], column)">
+ {{ person[column] }}
+ </div>
・・・・・・
</div>
<div class="right-person-table">
・・・・・・
+ <input type='text' [(ngModel)]='person[column]' [style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'" (blur)="toggleVisible(person['ユニークキー'], column)">
+ <div [style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'" (dblclick)="toggleVisible(person['ユニークキー'], column)>
+ {{ person[column] }}
+ </div>
・・・・・・
</div>
component.ts
+ import { Component, OnInit } from '@angular/core';
export class PersonComponent implements OnInit {
+ isVisible: {};
・・・・・・・・・・
+ ngOnInit() {
+ const value = this.data.person.map(p => {
+ const uniqueKey = p.details['ユニークキー'];
+ Object.keys(p.details).map(column => {
+ const isVisibleKey = uniqueKey + column;
+ this.isVisible = { [isVisibleKey]: false };
+ })
+ });
+ }
・・・・・・・・・・
+ toggleVisible(uniqueKey, column) {
+ const isVisibleKey = uniqueKey + column;
+ this.isVisible = {
+ [isVisibleKey]: !this.isVisible[isVisibleKey]
+ };
+ }
}
ポイント
ポイントはpersonのユニークキーとカラム名で作ったKeyとtrue/false判定ができるValueを持ったオブジェクト(isVisible)を作ることです。
html側でisVisbleの変更を感知(スタイルバインディング)し、要素(div/input)の表示の切り替えを行ってくれます。
また、今回はデータの修正を同時に複数を行わない仕様です。なので、isVisibleオブジェクトで全てのデータの真偽値判定をするプロパティを持っておく必要はなく、データを上書きしていく仕様で問題ありません。
今後に向けて
次回がラストです。
テキストを修正した時に、クラスを付与してテキストを赤くする機能を実装していきます。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library(mat-table)
Angular Material UI component library(mat-button-toggle)
【Angular】Excelやスプレッドシートのような表を作ってみた④【mat-button-toggle-group編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第4回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第4回 mat-button-toggle-group編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
mat-button-toggle-group編
テーマ
今回はmat-button-toggle-groupを使って、リスト表示の切り替え機能を実装していきます。
コード量が一気に多くなります。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
今回はcolumnの種類を増やしています。
※雑なcolumnの追加と見にくさはお許しくださいmm
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
+ left_column: [ "FirstName", "Hobby2"],
+ right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
+ details: { Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
info: { info1: "", info2: "" },
+ details: { Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
コード
module.ts
+ import { MatButtonToggleModule } from '@angular/material/button-toggle';
・・・・・・・・・
imports: [
+ MatButtonToggleModule
],
・・・・・・・・・
component.html
+ <div class="contents">
+ <mat-button-toggle-group #group="matButtonToggleGroup">
+ <mat-button-toggle value="left_column" checked="true" aria-label="Text align left" class="product-button">
+ <mat-icon class="product-icon">ああ</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="right_column" aria-label="Text align right" class="product-button">
+ <mat-icon class="product-icon">あああ</mat-icon>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>
<div class="person-table">
・・・・・・
</div>
+ <div class="right-person-table">
+ <mat-table [dataSource]="getData(data)">
+ <ng-container *ngFor="let column of data[group.value]">
+ <ng-container [matColumnDef]="column">
+ <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
+ <td mat-cell *matCellDef="let person">
+ <input type='text' [(ngModel)]='person[column]'>
+ </td>
+ </ng-container>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="data[group.value]"></tr>
+ <tr mat-row *matRowDef="let row; columns: data[group.value];"></tr>
+ </mat-table>
+ </div>
ポイント
ポイントは以下の3つです。
・mat-button-toggle要素のvalue属性に、表示させるリストの列名が入っている配列オブジェクトのキー(今回はleft_columnとright_column)を指定する
・mat-button-toggle-group要素で定義したローカル変数(group)を利用し、mat-header-row要素とmat-row要素に上記のキーを代入する
・描画時に出しておきたいリストが決まっている場合は、そのリストのキーを定義しているmat-button-toggle要素に「checked="true"」を追加する
今後に向けて
次回は要素(div/input)の切り替えを行います。
通常はindexを使うと思いますが、複数テーブルを作成してindexだけでは切り替える要素の指定ができない場合の要素切り替えを行います。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library(mat-table)
Angular Material UI component library(mat-button-toggle)
【Angular】Excelやスプレッドシートのような表を作ってみた③【デザイン修正編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第3回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第3回 デザイン修正編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
デザイン修正編
テーマ
今回は簡単なデザイン修正を行います。
具体的には、1列目を固定したり、横スクロールができるようにしていきます。
実は、1列目の固定はmat-tableにstickyと付け加えるだけ実装できます。しかし、私の場合はそれが上手く効かなかったので、自力で実装することになりました。
細かいデザイン(交互に色を変える・テキストを中央表示させるなど)については本記事には書いておりませんので、詳細についてはグーグルさんに聞いてみてください。
前提
前回記事の続きになります。
型定義は省いています。
コード
component.html
+ <div class="person-table">
<mat-table [dataSource]="getData(data)">
<ng-container *ngFor="let column of data['column']; let i = index">
<ng-container *ngIf="i === 0; else elseColumn">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>画像表示</th>
<td mat-cell *matCellDef="let person">
<mat-icon svgIcon="camera-icon">
</td>
</ng-container>
</ng-container>
<ng-template #elseColumn>
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let person">
<input type='text' [(ngModel)]='person[column]'>
</td>
</ng-container>
</ng-template>
</ng-container>
<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</mat-table>
+ </div>
component.scss
.person-table {
overflow: auto;
}
mat-table {
width: fit-content;
}
.mat-column-cameraColumn {
position: sticky;
left: 0;
}
ポイント
ポイントはmat-tableのwidthに「fit-content」を追加することです。
こうしておかないと、固定列がブラウザ画面に表示されているtable内でしか固定されず、ブラウザ画面に表示されていない部分がスクロールされてくると動いてしまいます。
今後に向けて
次回はmat-button-toggle-groupを使って、カラムの表示を切り替えていきたいと思います。
参考
素晴らしい記事に感謝いたします。
【Angular】Excelやスプレッドシートのような表を作ってみた②【mat-icon編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第2回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第2回 mat-icon編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
mat-icon編
テーマ
今回はmat-iconの実装を行います。
前提
前回記事の続きになります。
型定義は省いています。
データ構成です。
今回はcolumn配列データの最初に「Camera」を追加します。
※見にくくてすみませんmm
+ data = { column: [ "Camera", "Name", "Gender", "Hobby" ] ,
person: [{
info: { info1: "loud", info2: "big" },
details: { Name: "Taro", Gender: "1", Hobby: "" }
},
{
info: { info1: "", info2: "" },
details: { Name: "Hanako", Gender: "2", Hobby: "" }
}]
}
コード
module.ts
+ import { MatIconModule } from '@angular/material/icon';
・・・・・・・・・
+ imports: [ MatIconModule ],
・・・・・・・・・
component.ts
+ import { DomSanitizer } from '@angular/platform-browser';
+ import { MatIconRegistry } from '@angular/material';
・・・・・・・・・
constructor(
+ private matIconRegistry: MatIconRegistry,
+ private domSanitizer: DomSanitizer
) {
+ this.matIconRegistry.addSvgIcon(
+ 'camera-icon',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('dist/assets/camera_alt-24px.svg')
) ///アイコンダウンロードはこちらから
}
・・・・・・・・・
component.html
<mat-table [dataSource]="getData(data)">
+ <ng-container *ngFor="let column of data['column']; let i = index">
+ <ng-container *ngIf="i === 0; else elseColumn">
+ <ng-container [matColumnDef]="column">
+ <th mat-header-cell *matHeaderCellDef>画像表示</th>
+ <td mat-cell *matCellDef="let person">
+ <mat-icon svgIcon="camera-icon">
+ </td>
+ </ng-container>
+ </ng-container>
+ <ng-template #elseColumn>
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let person">
<input type='text' [(ngModel)]='person[column]'>
</td>
</ng-container>
+ </ng-template>
</ng-container>
<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</mat-table>
ポイント
ポイントは以下の4つです。
・Column配列データの最初の値に「Camera」を追加する
・assetsファイルにsvgデータを格納する
・DomSanitizerでサニタイズを回避する
・ifとindexを利用して、列を「indexが0の列」と「それ以外の列」に分ける
・indexが0の列にmat-icon要素を追加し、コンポーネントで指定した「camera-icon」を挿入する
アイコンのsvgデータはこちらから入手可能です。
Icons - Material Design
今後に向けて
次回は少しデザインを整えていきます。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library
