精华内容
下载资源
问答
  • 使用样式化组件和样式化系统构建的主题化的本机吐司组件。 特征 纯JS实现 支持多种吐司 兼容iOS和Android 风格与主题矛盾 使用React Hooks编写 使用TypeScript完全键入 安装 $ yarn add react-native-styled-toast ...
  • 离子React命令式吐司 :clinking_glasses: 此软件包使您可以像在Angular中一样使用命令式Toast。 用法 import { ToastProvider , useToast } from "@agney/ir-toast" ; // Wrap you App.tsx with ToastProvider ...
  • js 自定义吐司 toast 组件

    千次阅读 2019-08-01 09:41:41
    要有遥不可及的梦想,也要有脚踏实地的本事。... js实现自定义的一个吐司,很简单,直接上代码: 一 、 首先写布局和样式 html <div class="toast_box"> <p id="toast"></p>...

    要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)


           js实现自定义的一个吐司,很简单,直接上代码:

          一 、 首先写布局和样式

                  html

    
    <div class="toast_box">
         <p id="toast"></p>
    </div>
    
    

                 css

            
            .toast_box {
                width: 100%;
                position: absolute;
                bottom: 50px;
                justify-content: center;
                display: none;
            }
    
            .toast_box p {
                box-sizing: border-box;
                padding: 10px 20px;
                max-width: 72%;
                width: max-content;
                background: #000;
                color: #FFF;
                font-size: 16px;
                text-align: center;
                border-radius: 6px;
                opacity: 0.8;
            }
    
    

         二、封装吐司的方法

    
            function toast(text, time) {
                var toast = document.getElementById('toast');
                var toast_box = document.getElementsByClassName('toast_box')[0];
                toast.innerHTML = text;
                toast_box.style.display = 'flex';
                setTimeout(() => {
                    toast_box.style.display = 'none';
                }, time)
            }
    
    

         三、最后直接在需要的地方调用这个方法就行了,例如:

    
    toast('手机号码不能为空', 3000);
    
    

            自定义吐司已经完成,但只是单纯的显示和隐藏似乎是有些不太好看,用户体验会不太好,最终,柚子又加入了一些显示和隐藏的动画效果,会更好看一些,下面贴出所有代码:

            
            <body>
                <div class="toast_box">
                    <p id="toast"></p>
                </div>
            </body>
    
            <style>
                @keyframes show {
                    0% {
                        opacity: 0;
                    }
    
                    100% {
                        opacity: 1;
                    }
                }
    
                @keyframes hide {
                    0% {
                        opacity: 1;
                    }
    
                    100% {
                        opacity: 0;
                    }
                }
    
                .toast_box {
                    width: 100%;
                    position: absolute;
                    bottom: 50px;
                    justify-content: center;
                    display: none;
                }
    
                .toast_box p {
                    box-sizing: border-box;
                    padding: 10px 20px;
                    max-width: 72%;
                    width: max-content;
                    background: #000;
                    color: #FFF;
                    font-size: 16px;
                    text-align: center;
                    border-radius: 6px;
                    opacity: 0.8;
                }
            </style>
    
            <script>
                function toast(text, time) {
                    var toast = document.getElementById('toast');
                    var toast_box = document.getElementsByClassName('toast_box')[0];
                    toast.innerHTML = text;
                    toast_box.style.animation = 'show 1.5s'
                    toast_box.style.display = 'flex';
                    setTimeout(() => {
                        toast_box.style.animation = 'hide 1.5s'
                        setTimeout(() => {
                            toast_box.style.display = 'none';
                        }, 1400)
                    }, time)
                }
            </script>
    
    

        好了,就是这些了,希望能帮助到一些有需要的朋友!!!

     

    展开全文
  • 吐司提示框组件 效果截图:  0 提示 黑色背景色  1 成功提示 浅蓝色背景色       2 错误提示 粉红色背景色     package swing.component.label; import java.awt.Color; import java.awt....

    吐司提示框组件

    效果截图:



     0 提示 黑色背景色


     1 成功提示 浅蓝色背景色

     

     

     

    2  错误提示 粉红色背景色



     

     

    package swing.component.label;
    
    import java.awt.Color;
    import java.awt.Composite;
    import java.awt.Dimension;
    import java.awt.Font;
    import java.awt.FontMetrics;
    import java.awt.Graphics;
    import java.awt.Graphics2D;
    import java.awt.Insets;
    import java.awt.RenderingHints;
    import java.awt.Window;
    import java.awt.font.FontRenderContext;
    import java.awt.geom.Rectangle2D;
    import java.util.Timer;
    import java.util.TimerTask;
    import javax.swing.JWindow;
    
    /**
     * 吐司提示框组件
     * 
     * 
     * @author ccw
     * @since:2014-2-28
     */
    public class Toast extends JWindow {
    
    	private static final long serialVersionUID = 1L;
    	private String message = "";
    	private final Insets insets = new Insets(12, 24, 12, 24);
    	private int period = 1500;
    	private Font font;
    	public static final int msg = 0;// 提示 黑色背景色
    	public static final int success = 1;// 成功提示 浅蓝色背景色
    	public static final int error = 2;// 错误提示 粉红色背景色
    	private Color background;
    	private Color foreground;
    
    	/**
    	 * 
    	 * @param parent
    	 *            父窗体 (Frame Dialog Window)
    	 * @param message
    	 *            消息
    	 * @param period
    	 *            显示时间
    	 */
    	public Toast(Window parent, String message, int period) {
    		this(parent, message, period, 0);
    
    	}
    
    	/**
    	 * 
    	 * @param parent
    	 * @param message
    	 * @param period
    	 * @param type
    	 *            提示类型 msg:黑色背景色 success :浅蓝色背景色  error: 粉红色背景色
    	 */
    	public Toast(Window parent, String message, int period, int type) {
    		super(parent);
    		this.message = message;
    		this.period = period;
    		font = new Font("宋体", Font.PLAIN, 14);
    		setSize(getStringSize(font, true, message));
    		// 相对JFrame的位置
    		setLocationRelativeTo(parent);
    		installTheme(type);
    
    	}
    
    	@Override
    	public void paint(Graphics g) {
    		Graphics2D g2 = (Graphics2D) g;
    		// old
    		Composite oldComposite = g2.getComposite();
    
    		g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
    				RenderingHints.VALUE_ANTIALIAS_ON);
    		g2.setFont(font);
    		FontMetrics fm = g2.getFontMetrics();
    		g2.setColor(background);
    		g2.fillRoundRect(0, 0, getWidth(), getHeight(), 12, 12);
    		g2.setColor(foreground);
    		g2.drawString(message, insets.left, fm.getAscent() + insets.top);
    		// restore
    		g2.setComposite(oldComposite);
    	}
    
    	/**
    	 * 启动提示
    	 */
    
    	public void start() {
    		this.setVisible(true);
    		Timer timer = new Timer();
    		timer.schedule(new TimerTask() {
    			@Override
    			public void run() {
    				setVisible(false);
    			}
    		}, period);
    	}
    
    	/**
    	 * 修改消息
    	 * @param message
    	 */
    	public void setMessage(String message) {
    		this.message = message;
    		Dimension size = getStringSize(font, true, message);
    		setSize(size);
    		revalidate();
    		repaint(0, 0, size.width, size.height);
    		if (!isVisible()) {
    			start();
    		}
    	}
    
    	/*
    	 * 设置样式
    	 */
    	private void installTheme(int type) {
    		switch (type) {
    		case msg:
    			background = new Color(0x515151);
    			foreground = Color.WHITE;
    			break;
    		case success:
    			background = new Color(223, 240, 216);
    			foreground = new Color(49, 112, 143);
    			break;
    		case error:
    			background = new Color(242, 222, 222);
    			foreground = new Color(221, 17, 68);
    			break;
    
    		default:
    			background = new Color(0x515151);
    			foreground = Color.WHITE;
    			break;
    		}
    	}
    
    	/**
    	 * 得到字符串的宽-高
    	 * 
    	 * @param font
    	 *            字体
    	 * @param isAntiAliased
    	 *            反锯齿
    	 * @param text
    	 *            文本
    	 * @return
    	 */
    	private Dimension getStringSize(Font font, boolean isAntiAliased,
    			String text) {
    		FontRenderContext renderContext = new FontRenderContext(null,
    				isAntiAliased, false);
    		Rectangle2D bounds = font.getStringBounds(text, renderContext);
    		int width = (int) bounds.getWidth() + 2 * insets.left;
    		int height = (int) bounds.getHeight() + insets.top * 2;
    		return new Dimension(width, height);
    	}
    
    }
    
    
    测试 
    package swing.component.label;
    
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import javax.swing.BoxLayout;
    import javax.swing.JButton;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JPanel;
    
    /**
     * JLabel 支持GIF图像 very excited
     * 吐司组件的使用
     * @author CCW
     * @date 2014-2-23
     * @since v1.0
     */
    public class LabelTest {
    	public static void main(String[] args) {
    		JFrame frame = new JFrame();
    
    		JPanel panel = new JPanel();
    		panel.setAlignmentX(0.5f);
    		panel.setAlignmentY(1.0f);
    		BoxLayout boxLayout = new BoxLayout(panel, BoxLayout.X_AXIS);
    
    		panel.setLayout(boxLayout);
    
    		/**
    		 * 1-吐司组件的使用
    		 */
    		final Toast toast = new Toast(frame, "北京市没有权限访问", 5000, Toast.error);
    		
    		JLabel label = new JLabel("text");
    		panel.add(label);
    		JButton start = new JButton("start");
    		start.addActionListener(new ActionListener() {
    
    			@Override
    			public void actionPerformed(ActionEvent e) {
    				/**
    				 * 2-显示吐司组件
    				 */
    				toast.start();
    				
    
    			}
    		});
    		panel.add(start);
    		
    		JButton update = new JButton("update message");
    		update.addActionListener(new ActionListener() {
    
    			@Override
    			public void actionPerformed(ActionEvent e) {
    				/**
    				 * 3-修改组件消息提示内容
    				 */
    				toast.setMessage(Math.random() + "");
    
    			}
    		});
    		
    		panel.add(update);
    		frame.add(panel);
    		frame.setSize(960, 660);
    		frame.setLocationRelativeTo(null);
    		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    
    		frame.setVisible(true);
    	}
    
    }
    
     

     

    展开全文
  • React本机根吐司 特征 纯JavaScript解决方案。 同时支持Android和iOS。 Toast有很多自定义选项。 您可以通过调用api或在render内部使用Component来显示/隐藏Toast。 安装 npm install react-native-root-toast ...
  • 无依赖mini组件库,仅封装了警报,吐司,装载,actionSheet等使用频率较高的组件。适用于类似H5活动页面的简单移动端项目,不必使用这些组件而又一个大而全的UI库和框架。 iakit.alert iakit加载 iakit....
  • vue 吐司

    2019-11-28 10:44:48
    首先创建toast.js let BaoToast = {}; import Toast from "./...//Vue.use(组件,{}) BaoToast.install = function (Vue, options) { //this.$bao_toast("") Vue.prototype.$bao_toast = function (message,opt...

    首先创建toast.js

    let BaoToast = {};
    import Toast from "./Toast";
    //Vue.use(组件,{})
    BaoToast.install = function (Vue, options) {
    
    
      //this.$bao_toast("")
    
      Vue.prototype.$bao_toast = function (message,opt) {
    
        //创建组件  扩展 组件
        console.log(message);
    
        //返回的是 构造器
        const BaoToastContructor = Vue.extend(Toast); // vue组件实例= new 类
    
        if (document.getElementsByClassName("toast")[0]) {
          console.log("false");
          return;
        }
    
        //Toast实例
        let baotoast = new BaoToastContructor({
          data: {message: message,color:opt.color}
        });
        console.log(baotoast)
    
        //render() : 虚拟dom--->真实dom
        // baotoast.$mount();
    
        let dom = baotoast.$mount().$el;
        console.log(dom)
    
        document.body.appendChild(dom);
    
        setTimeout(() => {
    
          document.body.removeChild(dom);
        }, 1500);
    
        //div
    
    
      }
    
    
    };
    
    
    export default BaoToast;
    
    

    然后创建吐司组件

    <template>
        <div class="toast" :style="{backgroundColor:color}">{{message}}</div>
    </template>
    
    <script>
      export default {
        name: "Toast",
        data() {
          return{
            message: "",
            color: ""
          }
    
        }
      }
    </script>
    
    <style scoped>
      .toast{
    
        position: absolute;
        z-index: 999;
        top: 10px;
        left: 200px;
      }
    </style>
    
    

    最后在main.js里面挂载

    import BaoToast from "./utis/Toast"
    
    Vue.use(BaoToast,{a:11});
    
    展开全文
  • 首先这样写的全局吐司优点是什么 随用随丢 这样就能调起并且插到最外层body中(避免了ios因某些(如fixed的不兼容)层叠关系导致的被互相影响问题)消失时自动在body移除 toast({text:"我是要显示的文字"}); 可全局...

    先看效果

     
    首先这样写的全局吐司优点是什么

    1. 随用随丢
      这样就能调起 并且插到最外层body中(避免了ios因某些(如fixed的不兼容)层叠关系导致的被互相影响问题) 消失时自动在body移除
      toast({text:"我是要显示的文字"});
    2. 可全局引用,挂载到Vue.prototype方便使用
    3. 组件式开发便于维护

    写这个的最主要原因是项目整天用,然后想到element-ui有类似组件,就去模仿写了自己的

    文件目录
    toast
    --toast.vue
    --index.js 
    
    //插件用法:
    import toast from "toast/index.js";
    //text 要显示的文字  time显示的毫秒数,type是是否显示图标
    toast({text:"要显示的文字",time:1000})
      .then(()=>{
        console.log("关闭后执行");
      })
      .catch(()=>{})
    
    

    index.js文件: 

    import Vue from 'vue'
    import toast from './toast.vue'
    // 创建组件构造器
    const toastHonor = Vue.extend(toast);
    
    export default function ({text="要显示的内容",time=2000,type=undefined}={}) {
      return new Promise((reslove, reject) => {
        let toastComponent = new toastHonor({el: document.createElement('div')});
        toastComponent.text = text;
        toastComponent.time = time;
        toastComponent.type = type;
    
        //插入到body
        document.body.appendChild(toastComponent.$el)
        // 回调函数
        toastComponent.close = function () {
          reslove();
        };
      })
    }

    toast.vue文件:

    <template>
      <transition @before-leave="beforeLeave" @after-leave="afterLeave" name="slide-fade">
        <div @click="hideToast" v-show="isShow" class="toast">
          <div class="main">
            <div v-if="type" class="icon-box" flex="main:center cross:center">
              <i v-show="type==='succeed'" class="iconfont icon-ic_select_simple font30 orange2"></i>
            </div>
            <div class="text">
              {{text}}
            </div>
          </div>
        </div>
      </transition>
    </template>
    <script>
      export default {
        props: {
          text: {type: String},
          time: {type: Number},
          type: {type: String},
        },
        mounted() {
          this.$nextTick(() => {
            this.isShow = true;
            this.timer = setTimeout(() => {
              this.hideToast();
            }, this.time)
          });
        },
        data() {
          return {
            isShow: false,
            timer: null,
          };
        },
        methods: {
          hideToast() {
            this.isShow = false;
            clearTimeout(this.timer);
            this.timer = null;
          },
          beforeLeave() {
            this.close();
          },
          afterLeave() {
            document.body.removeChild(this.$el);
          }
        }
      };
    </script>
    <style scoped lang="scss">
      .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 9999;
        .main {
          display: inline-block;
          padding: 0.2rem 0.4rem;
          min-width: 2.6rem;
          max-width: 4.4rem;
          border-radius: .04rem;
          background-color: rgba(66, 63, 56, 0.8);
          .icon-box {
            margin: 0 auto .1rem;
            width: .7rem;
            height: .7rem;
            border-radius: 50%;
            overflow: hidden;
            background-color: #fff;
          }
          .text {
            font-size: 0.3rem;
            line-height: .45rem;
            color: #fff;
          }
        }
      }
    
      .slide-fade-enter-active {
        transition: all 0.3s ease;
      }
    
      .slide-fade-leave-active {
        transition: all 0.3s ease;
      }
    
      .slide-fade-enter {
        transform: translate(-50%, -1.2rem);
        opacity: 0;
      }
    
      .slide-fade-leave-to {
        transform: translate(-50%, 0.5rem);
        opacity: 0;
      }
    </style>
    
    

    ps:主要是思想和思路 其实小伙伴们也可以查看element-ui的notice分类下的内容去模仿 
    element-ui是个好东西
    大神们写的东西都是个好东西
    看看别人的代码才知道什么是好东西

    文章写的不好的地方大佬们指点
    写作经验不多 可能排版也不好 请见谅 欢迎指教

    展开全文
  • 自定义吐司(Toast)

    2014-07-20 22:13:56
    自定义吐司toast ★如果要弹出来 可以相应触摸点击事件的窗体,需要做3件事情。★ * 1.params.type 设置为可以相应触摸事件 * 2.修改窗体类型 电话优先级窗体类型TYPE_PRIORITY_PHONE * 3.设置权限 android....
  • 组件组件库包含要在各种项目中使用的不同组件组件:- 阿凡达警报徽章按钮卡图像输入列表导航栏吐司
  • Xamarin.Forms调用吐司

    2017-08-15 22:15:44
    大家好,今天给大家介绍Xamarin.Forms底下调用吐司。 所谓的吐司,就是Toast,安卓底下有自带的吐司Toast,就是给用户提示信息,并且过一段时间后会自动消失。但自带的吐司有些简陋,今天我们要讲的是引用第三方库...
  • VUE自定义吐司toast

    2020-12-02 14:56:28
    一个在学习vue的小白,各种折腾,最近页面需要用到toast,故查了部分资料。 使用toast有两个方式, 一个是使用第三方插件(这个网上很多,... 另一个方式是自定义一个toast,效果见下图: ...// 创建组件构造器 con
  • .NET Framework的android风格的通知组件
  • android Toast 吐司 详解

    2017-09-14 10:53:09
    android:textColor="@color/bright_foreground_dark" android:shadowColor="#BB000000" android:shadowRadius="2.75" /> ``` 可以发现Toast加载的布局文件只有一个LinearLayout布局,并且只包含一个TextView组件。...
  • 吐司(Toast) Android用于提示信息的一个控件——Toast(吐司)! Toast是一个包含小信息的提示框。会自动消失。(并不干扰用户操作) ...Toast组件有两个方法:makeText()和show(),其中makeText()方法用于设...
  • 微信小程序开发中吐司也是重要的消息提示方式. 上代码: 1.index.wxml toast是微信提供的组件,duration是延迟时间,单位毫秒.这里设置是1000ms.bindchange是事件.在index.js中触发事件即可. {{toastText}} 2...
  • Vue Toast(吐司)实现

    2021-01-04 19:36:45
    Vue Toast(吐司)实现 前言 你好,最近刚在学习前端知识,在此记录一下自己的 Vue Toast 学习过程,并借此机会进行回顾,如有错误之处,请批评指出,谢谢! 我个人将其分为3步: 1. 制作 ; 2. 安装; 3. 挂载; 制作...
  • .NET Framework的android风格的通知组件
  • POI组件

    2019-07-31 21:13:28
    POI组件 APACHE旗下有很多已经开源成熟的项目,可以在apache.org官网进行下载。 下面简单介绍一下POI组件。 POI是基于微软OLE 2复合文档格式开发纯Java文件格式端口的主项目。微软办公文档以及使用MFC属性集序列化...
  • Toast 什么是Toast? Toast是Android系统提供的轻量级信息提醒...Context():表示应用程序环境的信息,即当前组件的上下文环境。Context是一个抽象类,如果在Activity中使用Toast提示信息,那么该参数可设置为“当前Acti
  • UI组件 UI组件是一组开放式响应组件,用于构建站点和Web应用程序的用户界面。 组件清单: 首席滑块 自定义选择 模态 SimpleAdaptiveSlider 吐司
  • CoolToast一个模仿酷安 8.0 的吐司,高度定制
  • 基于Angular2的Material Design组件,指令和服务是手风琴,自动完成,芯片(标签),折叠,Colorpicker,数据表,Datepicker,Dialog(模块),菜单,多选,选择,选项卡,标签(芯片),Toast和工具提示。...
  • Android组件系列----Activity组件详解 原始出处 文章来源:http://www.cnblogs.com/smyhvae/p/3924567.html   【正文】 注:四大组件指的是应用组件:Activity、Service、BroadcastReceiver、ContentProvider;...
  • MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中...
  • 吐司轻提示 表单组件 日历日历 级联选择 复选框复选框 DatetimePicker时间选择 字段输入框 表格表单 NumberKeyboard数字键盘 密码输入框 选择器 收音机单选框 评分 搜索搜索 滑杆 步进步进器 开关...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,248
精华内容 499
关键字:

吐司组件