百度智能小程序 温馨提示

prompt 温馨提示

解释： 温馨提示组件，可配置标题内容，提示内容，并可放置在页面的任何位置。

属性说明

示例 

在开发者工具中打开

代码示例

<view class="wrap">
    <view class="container">
        <view class="card-panel">
            <view class="comp-wrap">
                <smt-prompt>
                    <view slot="title">标题名称</view>
                    <view slot="content">内容信息描述，支持多行信息展示，高度根据内容信息自适应</view>
                </smt-prompt>
            </view>
        </view>
        <view class="card-panel">
            <view class="comp-wrap">
                <smt-prompt content-class="prompt-content">
                    <view slot="title">标题名称</view>
                    <view slot="content">
                        内容信息描述，支持多行信息展示，高度根据内容信息自适应<view class="content-herf" bindtap="clkTextShow">文字链接</view>
                    </view>
                </smt-prompt>
            </view>
        </view>
    </view>
</view>

Page({

    /**
     * 文字链接点击事件
     */
    clkTextShow() {
        swan.showToast({
            title: '暂未配置链接',
            icon: 'none'
        });
    }
});

.wrap {
    height: 100vh;
}

.smt-card-area {
    margin-top: 25.36rpx;
}

.card-panel:first-child {
    margin-top: 0;
}

.card-area {
    display: flex;
    margin: 90.58rpx 0 0;
    padding: 28.382rpx 30.797rpx;
    border: none;
    border-radius: 0;
    transition: background-color 200ms linear;
    align-items: center;
    justify-content: space-between;
}

.comp-wrap {
    background-color: #fff;
    margin-top: 25.362rpx;
    padding: 27.174rpx 30.797rpx;
}

.prompt-content {
    font-size: 25.362rpx;
    line-height: 1.5;
    color: #999;
}

.prompt-content .content-herf {
    color: #2772fb;
    display: inline;
}

{
    "navigationBarTitleText": "温馨提示",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-prompt": "@smt-ui/component/src/prompt"
    }
}