みなさんこんにちは！EPICs株式会社の大熊です！
今回は新規登録などの時パスワードを入力するケースが多いと思いますが、その際にパスワードを表示させたり非表示にさせたりと切り替えが出来る方法をお伝えしていきます！
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
通常時はパスワードが非表示になっている
目のアイコンを押すとパスワードが表示される
今回はこのようなパスワードの表示/非表示設定の実装を解説していきます！
準備が必要なもの
・Reveal & Hide Password(Plugin)
実装方法の解説
①パスワードのinputの設置
インプットが設置出来たらContent formatを[Password]に設定します。
②SettingsのGeneralの設定変更
SettingsのGeneralに移動し、[Expose the option to add an ID attribute to HTML elements][Expose the option to add an ID attribute to HTML elements]にチェックをします
こちらの設定を行うことで各エレメントにID Attributeを設定することができるようになります。
③パスワードinputにID Attributeの設定
再びDesignページに戻りパスワードinputを選択します。
パスワードinputを選択したら最下部にあるID Attributeを入力しましょう！
(ID Attributeは使いやすいものやわかりやすいものであれば何でも構いません！)
④Reveralとアイコンの設置の設置
Visual elementsからReveralを設置します。(Reveralの位置はどこでも基本的に大丈夫です。)
そしてinputの右側にお好みのアイコンを設置しましょう。
⑤アイコンの条件設定
アイコンのconditionalに[Reveal (～) Toggle visible is “”yes”]にてアイコンを変更するよう設定します。
⑥アイコンのワークフローの設定
Element ActionsからRevealのToggle a Revealを選択します。
ElementにReveal を設定し、idにinputに設定したID Attributeのpwd1を設定します。
これで設定は完了です。
最後にプレビューで実装の確認をしましょう。
この記事で少しでも開発力を高めることに寄与できていたら幸いです！
Bubbleをはじめノーコード開発に関する相談があればいつでもお待ちしてます！
