如何利用ionic框架設計出單選框radio?

ionic框架中有很多不同的控制元件,其中有複選框和單選框。複選框是可以進行多選,單選框只能單選。下面利用一個例項說明單選框的用法,具體操作如下:

如何利用ionic框架設計出單選框radio

工具/原料

mysql資料庫

截圖工具

方法/步驟

第一步,建立靜態頁面radio.html,引入ionic框架的CSS和JavaScript檔案,如下圖所示:

如何利用ionic框架設計出單選框radio

第二步,在body元素標籤內插入div和input單選框,並設定樣式,如下圖所示:

如何利用ionic框架設計出單選框radio

第三步,再次插入label、input和div,並設定樣式item-assertive,如下圖所示:

如何利用ionic框架設計出單選框radio

第四步,插入label標籤元素,並設定樣式item-balanced,如下圖所示:

如何利用ionic框架設計出單選框radio

第五步,插入label標籤,並設定元素樣式item-calm,如下圖所示:

如何利用ionic框架設計出單選框radio

第六步,再次插入label標籤,並設定元素樣式item-dark,如下圖所示:

如何利用ionic框架設計出單選框radio

注意事項

瞭解ionic框架中的單選框用法

合理利用樣式class

例項, 用法, 框架, 複選框, 單選框,
相關問題答案