ionicとAngularによるWebアプリ開発 - 備忘録

第2話 複雑なデザインのボタンの実装

＊重要＊

Angularのアップデートで、内容の一部が非推奨項目になっています。

[Angular] Angular v20 の変更点まとめ

https://qiita.com/ksh-fthr/items/0027538156c663b5342f

それに合わせた内容を、新しく書く予定ですが、この連載は停止とさせていただきます。

------------------------------------

この投稿には、以下の内容があります。

・HTMLで複雑なデザインのボタンの実装を行う方法

・実装例と注意点

１．HTMLで複雑なデザインのボタンの実装を行う方法

htmlで複雑なデザインのボタン（例えばボタンテキストの改行位置や配置、行ごとに色を変えるなど）を作るのは困難です。

とは言え、私の開発中のGamebookでボタンだけデザインを妥協するというのも面白くありませんし、かといってDIVでボタンの代用をさせるのも(”button　divで代用”で検索していただければ色々出てきますが)問題があります。

そこで考えたのが以下の方法です。

・DIVでデザインを行う(ボタンテキストも含めて)

・DIVと同じサイズで同じ位置のボタンを透明色で作る

・ただしボタンにテキストは使わない(代替テキストは必要なら使う)

２．実装例と注意点

それほど注意する点もありませんが以下のような実装で行けるかと思います。

（注：angularとionicの例です。サンプルの後ろで少し解説入れます）

html

---------------------------------------------------------------

<div class="outdiv">

<table>

<tr *ngFor="let eachText of eachButtonText">

<td>

{{eachText }}&nbsp;

</td>

</tr>

</table>

<ion-button class="inbutton"></ion-button>

</div>

---------------------------------------------------------------

css

---------------------------------------------------------------

.outdiv{

background-image: linear-gradient(45deg,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783,#e60000);

position: relative;

}

.inbutton{

background-color: transparent;

--background: transparent; //ion-buttonなら必要

height: 100%;

min-height: 0px;

width: 100%;

top: 0px;

left: 0px;

position: absolute;

}

---------------------------------------------------------------

angularとionicの部分について、少しだけ解説します。

htmlの”<tr *ngFor="let eachText of eachButtonText">”は、

・tableの各行に対してeachButtonTextという名前の配列を順次読み込み

・各配列の中身{{eachText }}を書き出す

処理を行っています。

もしeachButtonTextが["Line1", "Line2", "", "Line4"]という中身ならば

Line1

Line2

Line4

と言う4行のテキストを持つボタンになります。（もし&nbsp;が無ければ3行目は表示されません）

同じくhtmlの”ion-button”はionicで使用するinputボタンです。使い方はほぼ同じです。

cssの--background: transparent; はbackground-color: transparent;と同じ意味ですが、ionic内部の仕組みとして書く必要があります。

またmin-height: 0px;が書かれていますが、”ion-button”は既定のmin-heightを持っているので上書きのために設定しています。

他にも微調整する点はあるかと思いますが、大まかな方法の説明はこれで十分と思います。