<custom chineseName="关注" engName="follow"></custom>

<view class="container">
    <view class="card-area">
        <view class="top-description border-bottom">文字按钮样式</view>
        <view class="button-box">
            <view class="button-box-inner">
                <smt-follow
                    class="smt-follow"
                    follow-text="{{followText}}"
                    is-followed="{{isFollowed1}}"
                    bind:follow="onFollow1">
                </smt-follow>
                <text class="button-box-text">默认-blue</text>
            </view>

            <view class="button-box-inner">
                <smt-follow
                    class="smt-follow"
                    follow-text="{{followText}}"
                    background-color="white"
                    is-followed="{{isFollowed2}}"
                    bind:follow="onFollow2">
                </smt-follow>
                <text class="button-box-text">白底-white</text>
            </view>

            <view class="button-box-inner">
                <smt-follow
                    class="smt-follow"
                    follow-text="{{followText}}"
                    background-color="opacity"
                    is-followed="{{isFollowed3}}"
                    bind:follow="onFollow3">
                </smt-follow>
                <text class="button-box-text">透明-opacity</text>
            </view>

            <view class="button-box-inner">
                <smt-follow
                    class="smt-follow"
                    follow-text="{{followText}}"
                    background-color="none"
                    is-followed="{{isFollowed4}}"
                    bind:follow="onFollow4">
                </smt-follow>
                <text class="button-box-text">线框-none</text>
            </view>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">组合按钮样式</view>
        <view class="button-box" style="padding-left: 30.8rpx">
            <view class="button-box-inner">
                <smt-follow
                    mode="mixture"
                    follow-text="{{followText}}"
                    is-followed="{{isFollowed}}"
                    bind:follow="onFollow">
                </smt-follow>
                <text class="button-box-text">默认-blue</text>
            </view>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">图标按钮样式</view>
        <view class="button-box">
            <view class="button-box-inner">
                <smt-follow
                    mode="icon"
                    is-followed="{{isFollowed5}}"
                    bind:follow="onFollow5">
                </smt-follow>
                <text class="button-box-text">默认-blue</text>
            </view>
            <view class="button-box-inner">
                <smt-follow
                    mode="icon"
                    background-color="white"
                    is-followed="{{isFollowed6}}"
                    bind:follow="onFollow6">
                </smt-follow>
                <text class="button-box-text">白底-white</text>
            </view>
        </view>
    </view>
</view>
