angular – 如何将按钮固定到底部离子

发布时间：2020-12-17 18:02:07 所属栏目：安全来源：网络整理

导读：我尝试了将按钮固定到底部的不同可能性 ion-header ion-navbar ion-title b Audio Recorder/b /ion-title /ion-navbar ion-toolbar ion-segment color="danger" ion-segment-button value="camera" Recorder /ion-segment-button ion-segment-button (click)

我尝试了将按钮固定到底部的不同可能性

<ion-header>
    <ion-navbar>
        <ion-title>
            <b > Audio Recorder</b>
        </ion-title>
    </ion-navbar>
    <ion-toolbar >
        <ion-segment color="danger">
            <ion-segment-button  value="camera">
                Recorder
            </ion-segment-button>
            <ion-segment-button   (click)="ListAudioFiles()">
                Recording List
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>

    <ion-content class="has-footer" padding>
        <p *ngIf="!status" style="text-align: center; color: red;"><b> Recording... </b></p>
        <p *ngIf="!status" style="text-align: center; color: black; font-size: 40px;">{{total}}</p>
        <ion-grid style="text-align: center;">
            <ion-icon *ngIf="status" style="font-size: 180px;" (click)="startRecording()" name="mic"></ion-icon>
            <ion-icon *ngIf="!status" style="font-size: 180px; color: red" (click)="stopRecording()" name="mic"></ion-icon>
        </ion-grid>
    <ion-content>

我也有一个疑问,如果我添加一个按钮到标题,我需要突出显示我点击的按钮,如果我在列表页面列表按钮必须突出显示,如果记录器点击该按钮应突出显示,相应的页面应该是加载.

enter image description here

解决方法

希望这有助于某人.

.your-class {
    position: fixed;
    left: 0;
    bottom: 10px;
    right: 0;
}

左/右设置为0可使所有内容保持居中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!