Ionic 样式与组件详解

Ionic 框架提供了一系列 CSS 样式和组件，用于快速构建移动端应用界面。以下将详细介绍其核心部分。

一、工具栏样式

工具栏是应用中的常见元素，Ionic 通过 CSS 类来定义其样式：

• .bar：基础工具栏样式。
• .bar-header：用于页头工具栏。
• .bar-positive：设置工具栏颜色为蓝色等主题色。
• .title：用于设置工具栏内的标题文本。

例如，页脚工具栏的实现代码如下：

<div class="bar bar-footer bar-dark">
    <h1 class="title">页面底部</h1>
</div>

二、内容处理

在移动端开发中，主要内容显示在页头和页脚之间。Ionic 提供了两种内容样式：

1. .content：使用相对定位，适用于内容不需要滚动的情况。
2. .scroll-content：使用绝对定位，适用于内容需要滚动展示的情况。

常见问题包括页面头部占用空间，Ionic 提供了以下样式来解决：

• .has-header：为内容设置 top 值以排除页头空间。
• .has-subheader：排除副标题占用的空间。

示例代码：

<div class="bar bar-header bar-assertive">
    <h1 class="title">页头标题部分</h1>
</div>
<div class="bar bar-subheader">页头副标题</div>
<div class="scroll-content has-header has-subheader">
    页面内容部分
</div>
<div class="bar bar-footer bar-dark">
    <h1 class="title">页脚内容</h1>
</div>

三、按钮

按钮是交互的关键组件，Ionic 提供了多种按钮样式。

1. 按钮集合

.button-bar 用于创建按钮集合，常见于二级标题选项：

<div class="button-bar">
    <button style="background-color:orange" class="button button-positive">新闻</button>
    <button class="button">娱乐</button>
    <button class="button">影视</button>
    <button class="button">科技</button>
</div>

2. 常规按钮

通过不同 CSS 类设置按钮颜色，例如：

<div class="button">默认</div>
<div class="button button-light">常规</div>
<div class="button button-stable">标准</div>
<div class="button button-positive">蓝色</div>
<div class="button button-calm">浅蓝色</div>
<div class="button button-balanced">绿色</div>
<div class="button button-energized">橙色</div>
<div class="button button-assertive">红色</div>
<div class="button button-royal">紫色</div>
<div class="button button-dark">深色</div>

3. 块按钮

块按钮填充容器宽度：

• .button-block：填充且有圆角。
• .button-full：填充无圆角。

<button class="button button-royal button-block">登录</button>
<button class="button button-royal button-full">注册</button>

4. 按钮尺寸

通过 .button-small、.button-large 调整尺寸：

<button class="button button-royal button-small">微小按钮</button>
<button class="button button-royal">常规按钮</button>
<button class="button button-royal button-large">较大按钮</button>

5. 特殊按钮

• .button-outline：带边框的按钮。
• .button-clear：无背景色的按钮。

<button class="button button-royal button-outline">较大按钮</button>
<button class="button button-royal button-clear">无样式按钮</button>

6. 图标按钮

Ionic 集成图标，使用 icon ion-<图标名称> 类，并结合 .icon-left 或 .icon-right 控制图标位置。常见图标包括：

• .icon ion-loading：加载中图标。
• .icon ion-home：首页图标。
• .icon ion-star：关注图标。
• .icon ion-chevron-right：向右箭头。
• .icon ion-chevron-left：向左箭头。
• .icon ion-navicon：更多选项图标。

示例代码：

<button class="button icon-left ion-home">HOME</button>
<button class="button icon-left ion-star button-assertive">Favorite</button>
<button class="button icon-right ion-chevron-right button-calm">Learn More</button>
<button class="button icon-left ion-chevron-left button-clear button-dark">Back</button>
<button class="button icon ion-gear-a"></button>
<button class="button button-icon icon ion-settings"></button>
<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

四、列表

列表用于展示内容，Ionic 提供多种列表样式。

1. 基础列表

使用 .list 类创建列表：

<div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
    <div class="list">
        <div class="item">萨德黑科技，看到之后开心的笑了...</div>
        <div class="item">震惊！震惊！震惊！郑州...</div>
        <!-- 更多列表项 -->
    </div>
</div>

2. 列表分组

通过 .item-divider 添加分组标题：

<div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
    <div class="list">
        <div class="item-divider">国内新闻</div>
        <div class="item">国内新闻详情...</div>
        <!-- 更多项 -->
        <div class="item-divider">国际新闻</div>
        <div class="item">国际新闻...</div>
        <!-- 更多项 -->
    </div>
</div>

模仿手机设置列表：

<div class="list">
    <div class="item-divider">设置</div>
    <div class="item">字体设置</div>
    <div class="item">颜色设置</div>
    <div class="item-divider">通用</div>
    <div class="item">关于我们</div>
    <div class="item">软件更新</div>
    <div class="item-divider">中心</div>
    <div class="item">账户</div>
    <div class="item">预览</div>
    <div class="item">扫描</div>
</div>

3. 列表中使用图标

通过 .item-icon-left 或 .item-icon-right 在列表项中添加图标：

<div class="list">
    <a class="item item-icon-left" href="#">
        <i class="icon ion-email"></i>
        个人邮箱
    </a>
    <a class="item item-icon-left item-icon-right" href="#">
        <i class="icon ion-chatbubble-working"></i>
        通知
        <i class="icon ion-ios-telephone-outline"></i>
    </a>
    <a class="item item-icon-left" href="#">
        <i class="icon ion-mic-a"></i>
        语音设置
        <span class="item-note">设置细节</span>
    </a>
    <a class="item item-icon-left" href="#">
        <i class="icon ion-person-stalker"></i>
        朋友圈
        <span class="badge badge-dark">10</span>
    </a>
</div>

4. 列表中使用按钮

通过 .item-button-right 在列表项中添加按钮：

<div class="list">
    <div class="item item-button-right">
        通知我
        <button class="button button-light">
            <i class="icon ion-ios-telephone"></i>
        </button>
    </div>
</div>

5. 列表中使用头像

使用 .item-avatar 显示圆形头像，但图片已被过滤，仅保留结构：

<div class="list">
    <a class="item item-avatar" href="#">
        <h2>大牧</h2>
        <p>道友最近去哪里云游了？</p>
    </a>
    <!-- 更多项 -->
</div>

6. 列表中处理图片

使用 .item-thumbnail-left 在内容左侧显示图片，同样图片被过滤：

<div class="list">
    <a class="item item-thumbnail-left" href="#">
        <h2>关于萨德那些事儿</h2>
        <p>最近萨德很狗血，不过很开心有木有</p>
    </a>
    <a class="item item-thumbnail-left" href="#">
        <h2>又是脚臭盐</h2>
        <p>哪里还有放心盐呢？</p>
    </a>
</div>

7. 内嵌列表

使用 .list-inset 样式创建内嵌列表：

<div class="list list-inset">
    <a class="item item-thumbnail-left" href="#">
        <h2>关于萨德那些事儿</h2>
        <p>最近萨德很狗血，不过很开心有木有</p>
    </a>
    <!-- 更多项 -->
</div>

五、卡片

卡片提供比列表更优雅的展示方式。示例代码：

<div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
    <div class="card">
        <div class="item-divider item-text-wrap">分组 模拟卡片的标题</div>
        <div class="item item-text-wrap">卡片内容</div>
        <div class="item-divider">分组 模拟卡片的脚注</div>
    </div>
    <div class="card">
        <div class="item-divider">分组 模拟卡片的标题</div>
        <div class="item">卡片内容</div>
        <div class="item-divider">分组 模拟卡片的脚注</div>
    </div>
</div>

头像卡片示例：

<div class="card">
    <div class="item item-avatar">
        <h2>大牧莫邪</h2>
        <p>那些曾经的风花雪月</p>
    </div>
    <div class="item item-icon-left assertive">
        <i class="icon ion-music-note"></i>
        开始倾听
    </div>
</div>

六、表单

表单是用户交互的核心组件。基础表单示例：

<div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
    <label class="item item-input">
        <input type="text" placeholder="请输入用户名!">
    </label>
    <label class="item item-input">
        <input type="password" placeholder="请输入密码!">
    </label>
    <label class="item item-input">
        <span class="input-label">ACCOUNT：</span>
        <input type="text" placeholder="please enter your account!">
    </label>
    <label class="item item-input">
        <span class="input-label">密码：</span>
        <input type="password" placeholder="确认密码!">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">ACCOUNT：</span>
        <input type="text" placeholder="please enter your account!">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">PASSWORD：</span>
        <input type="password" placeholder="please enter your password!">
    </label>
</div>

内嵌表单：

<div class="list list-inset">
    <label class="item item-input">
        <i class="icon ion-person"></i>
        <input type="text" placeholder="">
    </label>
    <label class="item item-input">
        <i class="icon ion-key"></i>
        <input type="text" placeholder="">
    </label>
</div>

七、开关

开关类似于复选框，但更适合移动端。示例：

<div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
    <div class="list">
        <div class="item item-toggle">
            HTML课程
            <label class="toggle">
                <input type="checkbox">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </div>
    </div>
</div>

八、选项卡

选项卡常用于底部导航。基础选项卡：

<div class="tabs">
    <div class="tab-item">首页</div>
    <div class="tab-item">微淘</div>
    <div class="tab-item">购物车</div>
</div>

带图标的选项卡：

<div class="tabs tabs-icon-top">
    <a class="tab-item">
        <i class="icon ion-home"></i>
        首页
    </a>
    <a class="tab-item">
        <i class="icon ion-chatbox"></i>
        朋友
    </a>
    <a class="tab-item">
        <i class="icon ion-android-mail"></i>
        邮箱
    </a>
    <a class="tab-item">
        <i class="icon ion-person"></i>
        我的
    </a>
</div>

通过以上样式和组件，Ionic 能够高效地构建移动端应用界面，开发者可根据需求灵活组合使用。