zoukankan      html  css  js  c++  java
  • "头像组件"组件:<avatar> —— 快应用组件库H-UI

    <import name="avatar" src="../Common/ui/h-ui/advance/c_avatar"></import>
    <template>
        <div class="container">
            <avatar src="https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/touxiang.png"></avatar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="avatar" src="../Common/ui/h-ui/advance/c_avatar"></import>
    <template>
        <div class="container">
            <avatar src="https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/touxiang.jpeg" circle="false"></avatar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="avatar" src="../Common/ui/h-ui/advance/c_avatar"></import>
    <template>
        <div class="container">
            <avatar size="120" src="https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/touxiang.jpeg"></avatar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="avatar" src="../Common/ui/h-ui/advance/c_avatar"></import>
    <template>
        <div class="container">
            <avatar icon="user" bg-color="bg-info"></avatar>
            <avatar icon="user" bg-color="bg-info" circle="false"></avatar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="avatar" src="../Common/ui/h-ui/advance/c_avatar"></import>
    <template>
        <div class="container">
            <avatar text="云"></avatar>
            <avatar text="C" bg-color="bg-warning" circle="false"></avatar>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    扫码体验

  • 相关阅读:
    JSP--------------------图书管理器
    Vue-router的基本使用(创建--动态跳转)
    JSP邮箱小案例(完成全部功能)
    Vue CLI3脚手架的使用
    Vue小案例测试-------------------实现购物车小模块
    JSP第六次作业提交~~~~~~~~~~~~~~~~~~~~~
    JSP项目第二阶段(使用数据库存储与注册)
    jsp第三次作业-------------------------------
    2021/4/19作业
    4.12作业
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/tou-xiang-zu-jianzu-jianltavatargt--kuai-ying-yong.html
Copyright © 2011-2022 走看看