如何利用ionic框架設定副標題subheader樣式?

Tags: ,

ionic框架根據標題來分,有主標題、副標題和尾部標題。其中,副標題是相對於主標題來說的,一般情況下,副標題是在主標題下方,並且是放在頂部位置。下面利用一個例項說明副標題的用法以及設定樣式,詳情如下:

如何利用ionic框架設定副標題subheader樣式

工具/原料

ionic

AngularJS

瀏覽器

截圖工具

HBuilder

方法/步驟

第一步,建立靜態頁面subheader.html,修改title內容為“ionic副標題”,並引入ionic需要用到的CSS和JS檔案,如下圖所示:

如何利用ionic框架設定副標題subheader樣式

第二步,為了說明主標題和副標題的不同之處,這裡插入一個主標題,設定樣式,如下圖所示:

如何利用ionic框架設定副標題subheader樣式

第三步,在主標題下方插入一個副標題,並利用ionic預設樣式進行設定,如下圖所示:

如何利用ionic框架設定副標題subheader樣式

第四步,編寫完畢,選擇瀏覽器進行預覽頁面,這時會在頁面看到一個主標題和副標題,如下圖所示:

如何利用ionic框架設定副標題subheader樣式

第五步,由於主標題和副標題的背景色都是白色,這裡為了區分,分別給它們新增樣式bar-energized和bar-assertive,如下圖所示:

如何利用ionic框架設定副標題subheader樣式

第六步,再次預覽頁面,這時主標題的背景由白色變為黃色背景,而副標題背景則變為紅色,如下圖所示:

如何利用ionic框架設定副標題subheader樣式

注意事項

注意ionic框架主標題和副標題的相同和不同點

合理使用ionic框架樣式

,
相關問題答案