Ionic7では、ion-inputなどの入力要素のマークアップがとてもシンプルになる話。 - Qiita
Ionic7から、ion-inputなどの入力要素のマークアップがとてもシンプルになる予定です。該当するdiscussionはこちら。 現在のマークアップ方法は以下の通りです。 <ion-item> <ion-label>氏名</ion-label> <ion-input></ion-input> <span slot="error">氏名を入力ください</span> </ion-item> <ion-item fill="solid" counter="true"> <ion-label>コメント</ion-label> <ion-textarea maxlength="500"></ion-textarea> </ion-item> <ion-item fill="outline"> <ion-label>配色</ion-label> <ion-select> <ion-select-
IonicのIonItemは、divタグにもaタグにもbuttonタグにもなりうる万能コンポーネント
<ion-item> <div> <slot name="start"></slot> <div class="item-inner"> <div class="input-wrapper"> <slot><ion-label>Item</ion-label></slot> // ion-labelはslotが指定されていないためにここに格納される </div> <slot name="end"></slot> </div> </ion-item> （厳密にはshadow-rootなので、 host 以下に入ったり、入れ子になってる ion-label はshadow-rootの外に出るのですが、そこは割愛します） で、ここで注目して欲しいのは ion-item > div です。何も指定してなければ、これは汎用コンテナである div がくるのですが、IonItemは持っている属性によって
package.jsonのnpmのバージョンを一括で書き変えてくれるncuが便利だった - tacamy--blog
npm-check-updatesというNode.jsのモジュールを使ってみたら便利でしたという話です。 2013年のブックマークとかもあったので、別に新しいものではないと思うけど、私は知らなくて感動したのでした。 なにこれ？ package.jsonに書かれているnpmのバージョンを、一括で最新に書き変えてくれるNode.jsのモジュール。 ncuコマンドひとつで一度に書き変えできて便利。 実際に書き変える前に確認だけすることもできる。 「メジャーバージョンは固定で、それ以下を最新にしたい」などの細かい設定もオプションで可能。 どんなときに便利なの？ 既存のpackage.jsonを流用して、同じnpmをそのまま使いたいけど、バージョンだけは新しくしたいとき。 昔つくったサイトのメンテナンスで、npmのバージョンだけを新しくしたいとき。 使い方 初回のみ、npm-check-update
個人開発でよく使うWebアプリのデザイン・実装 (Ionic / Angular) - Qiita
はじめに Ionicを使ってWebアプリを作る上で、個人開発でよく使うデザイン・実装をまとめてみました。 実装例には全てIonicのデフォルトコンポーネントを使っているので、追加ライブラリのインストールは不要です！ タイトル横の星の数はおすすめ度です。(個人的な印程度に思ってください) Ionicとは Ionicは、通常のWebページはもちろん、PWAやハイブリットアプリも同一のソースコードから生成できる、とても便利なフロントエンドのフレームワークです。 少ないリソースで多くのプラットフォームに対応したアプリケーションを作成できるので、個人や小規模などのリーンな開発で特に有用かと思います。 いい感じの見た目のUIコンポーネントが予め備わっているので、CSSフレームワークの選定をせず、すぐに開発を始められるので、開発を始めるまでに迷うことが少ないです。 なのでフロントエンドが主戦場じゃない人
意外と便利な「Tab型のメモアプリ」を実装してみた【Ionic】 - Qiita
はじめまして、ますみです！ はじめに この記事は、Ionic Advent Calendar 2018の22日目の記事です。 ionicというフレームワークの中で、実装しリリースしたメモアプリ「Smart Memo -Tab Style-」について紹介したいと思います。また、この記事は、コードの紹介よりも「立案→開発→リリース」の約2ヶ月間の開発プロセスについてまとめています。みなさんの今後の開発において有益な記事となりましたら、幸いです。 "Smart Memo"とは？ Smart Memoとは、簡単に言うと、「スマートにメモを管理するタブ型のシンプルなメモアプリ」です。 >>ターゲット / Target 「メモがすごく溜まりがち！」 「メモを整理する時間がない...。」 などという方々のためのアプリです。 >>コンセプト / Concept 「メモをスマートに管理したいが、整理する時間
（中級者向け）Ionic 4でのCSSカスタム変数の使い方 - Qiita
Ionic 4は、Web Componentsが導入され、一部のスタイリングはShadowDOMによってカプセル化されています。そのため、グローバルとは異なる方法で、スタイリングを当てる必要があります。ドキュメントだけでは分かりづらいという声があったので、いくつかのサンプルをまとめておきます。 テーマの当て方自体がわからない方は、先に CSS変数｜Ionic Framework 日本語ドキュメンテーション をご覧ください。 サンプル ion-card ShadowDOMになっていないため、CSSカスタム変数も使えるけど、普通にCSSでも上書きできる。 // ○ スタイルが当たる ion-card { background: #000000; color: #ffffff; } // ○ スタイルが当たる ion-card { --background: #000000; --color:
CSSだけで実装できる横スクロールUI（スクロールバーなし）
モバイル時のUIで横スクロールのを採用するアプリやWebサービスも増えてきており、デザイナーやコーダーの方は実装する機会もあるかと思います。 今回はCSSだけで横スクロールを実装する方法と気にするべきポイントをご紹介します。 横スクロール(horizontal scroll)とは 上記の画像の様なUIのことです。アプリの方が見る機会は多いと思いますが、WEBサービスでも最近はよく見るかと思います。 横スクロールが見れるWEBサービス（2017/09現在） ・Google ・Airbnb ・TripAdvisor ・Bookingtable ・zomato 実装時の気をつけるポイント 横スクロールだと画面の横にコンテンツを配置するため、縦のスペースを取らずにコンテンツを配置することができます。ですが、アプリなどでよく使用されるUIだとはいえ、まだまだ横スクロールに慣れていないユーザーもいるか
Ionicで半モーダルを作成する - Qiita
(この記事はIonicアドベントカレンダー2018の9日目の記事です。 この記事はKineca Developer Blogにアップしたものをアドカレ用に修正したものです。 興味ある方KinecaDeveloperBlogもぜひどうぞ！） 本記事は半モーダルをIonicで実装する方法について解説しています（最近急増中のあれです） 半モーダル知らない人は以下のリンクをクリック。 iOSにおける半モーダルビューの解釈 Ionicで半モーダルを実装する場合、次の手順を踏めば実装できます。 ModalControllerを改造して実装する メインのコンテンツはion-footer内に記述する ion-contentは透過させるようにする 背景を黒くさせるbackdropを用意する これらを実装すると、次のようになります。 ※上の画像は弊社のエンタメアプリ「pato」に実装された様子になります。興味
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ionic + NestJSプロジェクトを立ち上げる時の構成テンプレートの使い方
新しいHTML5 APPプラットフォーム「Capacitor」を試してみた - Qiita
Using with Ionic Framework | Capacitor Documentation
Top 4 Ionic App Builders and Universal Ionic Templates | Envato Tuts+
イイコトイウネエ - 名言シェアアプリ
In this tutorial, I am going to walk through how you can implement our own custom icons when using Ionicons in an Ionic application.
[Ionic]よく見るタブメニューのページをion-slidesで実装する - Qiita![[Ionic]よく見るタブメニューのページをion-slidesで実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c5de0282097efb5c8fea258e8d0c76ab8cb09ad/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSW9uaWMlNUQlRTMlODIlODglRTMlODElOEYlRTglQTYlOEIlRTMlODIlOEIlRTMlODIlQkYlRTMlODMlOTYlRTMlODMlQTElRTMlODMlOEIlRTMlODMlQTUlRTMlODMlQkMlRTMlODElQUUlRTMlODMlOUElRTMlODMlQkMlRTMlODIlQjglRTMlODIlOTJpb24tc2xpZGVzJUUzJTgxJUE3JUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0zOTlhNTU4NGVlZmY0NjM0MmJkYzA0NmQ5ZjE5YWJjZQ%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBzY3JwZ2lsJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kZTI1NzAxNDM4ZWY2OWM0MDIxNWIyMmVlYTRhY2EzZQ%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D8dd56bd8e9f2a6586115715db0423a2f)
ionic(cordova)で横スクロールするメニューを実装するときのメモ - とりあえずphpとか
manbetx2.0手机登陆|manbetx客户端应用下载
how to set header background color in ionic 4
高度なカスタマイズ | Ionic日本語ドキュメンテーション
Color Generator | Ionic Documentation