首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于状态可见原则

但状态并不只有操作后才出现,操作前也有状态,如制作一个组件时,通常会把组件的不同状态(正常、鼠标经过、鼠标点击、加载中、报错、禁用等)做出来,其中正常态和禁用态就是操作前的状态,其它都是操作后的反馈。...我们对列表前面的三角箭头所表达的意思已经很熟悉了,通常代表着可以展开下一级内容 同时也意味着存在下一级内容(并非都有这一层意思,如文件夹就没有,仅能表达类型) 可见,列表前的三角箭头有表示『有下一层级信息...』的意思,同时箭头的方向表示『层级是否展开』的状态。...应用 下拉菜单下拉菜单的激活方式引起的一个思考点,我们常见的下拉菜单有两种激的方式,hover 激活 和 click 激活。 但从外观上是无法进行区分的,也就是没有操作前的暗示。...如果系统中同时存在不同激活方式的下拉菜单,这种尝试就更加让人烦恼了。 应对的方案除了整个系统统一之外,有没有其他的方案呢?从操作前暗示的角度入手,能不能通过三角箭头的不同样式来区分呢?

2.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    剑走偏锋——用css制作一个三角箭头

    通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的。...对,让我们把中间的文字去掉吧: image.png   这样,就出现4个三角形了,然后我们如果需要顶部那个三角形,只需要将border的left、right、bottom设置成背景色就行了: image.png...  这样,我们需要的三角形就出现了,并且可以设置4个不同方向的了: image.png   样式代码很简单,就几句话:   东西很简单,但很想到用border边框来制作三角箭头确实有点剑走偏锋了...相关阅读:《CSS3 @font-face实现颜色大小可控的三角效果》        《告别图片—使用字符实现兼容性的圆角尖角效果beta版》   PS:因为园子里发的demo不能出现空标签,也就是我必须在

    41910

    如何用Scratch 3绘制矢量图形 【Gaming】

    要更改圆的颜色,请选择箭头工具,单击圆以选择它,然后单击“填充”下的下拉菜单。这将打开用于更改形状的颜色、饱和度和亮度的选项。–如果希望形状透明,请选择带有对角线红线的白色框将颜色设置为“无”。...–如果要在对象周围添加或移除彩色边框,请选择“轮廓”下的下拉菜单。 图片9.png 3. 选择节点工具。单击对象的中心将其选中。您将看到四个节点均匀分布在圆的边缘。...使用箭头工具选择杆。要将茎移到苹果后面,请单击画布上方的“后退”按钮。 图片14.png 添加突出显示形状 1. 选择线条工具。在苹果形状上画一个三角形,把每一条新线和前一条线的末端连接起来。...使用箭头工具选择三角形,并使用填充工具将其更改为较浅的颜色,例如白色。 3. 使用“节点”工具添加和调整节点以创建高光形状。如果节点过于尖锐,可以将其更改为曲线。...您的新精灵将与项目的其他精灵一起出现在右角。在你的Scratch项目中使用它,在Scratch网站上与其他Scratch用户共享它,最重要的是用vectors绘制出更酷的东西。

    5.5K00

    利用HTML5,无JS实现各种交互效果

    ``标签前面出现了一个小三角; 小三角图形的隐喻是:我是可点击的,点击我可能会出现宝箱。 OK,我们不妨就点击一下,结果如下图: !...``标签前面的小三角方向朝下了; 此时我们再一次点击,``标签内容又会隐藏收起,箭头方向还原,如下图: !...imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 轮廓区域比原生的``要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头...这是因为HTML元素中如果多个focusable同时click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有内嵌标签。...[下拉菜单gif效果](http://upload-images.jianshu.io/upload_images/13133049-5775c63eaa1c5d60.gif?

    7.6K20

    UML常用图的几种关系的总结

    箭头指向】:三角箭头的实线,箭头指向父类 2. 实现(Realization) 【实现关系】:是一种类与接口的关系, 表示类是接口所有特征和行为的实现....【箭头指向】:三角箭头的虚线,箭头指向接口 3....【代码体现】:成员变量 【箭头及指向】:普通箭头(或实心三角箭头)的实心线,指向被拥有者 上图中,老师与学生是双向关联,老师有多名学生,学生也可能有多名老师。...【代码体现】:成员变量 【箭头及指向】:空心菱形的实心线,菱形指向整体 5. 组合(Composition) 【组合关系】:是整体与部分的关系, 但部分不能离开整体而单独存在....【代码表现】:局部变量、方法的参数或者对静态方法的调用 【箭头及指向】:箭头的虚线,指向被使用者

    21020

    UML常用图的几种关系的总结

    箭头指向】:三角箭头的实线,箭头指向父类 2. 实现(Realization) 【实现关系】:是一种类与接口的关系, 表示类是接口所有特征和行为的实现....【箭头指向】:三角箭头的虚线,箭头指向接口 3....【代码体现】:成员变量 【箭头及指向】:普通箭头(或实心三角箭头)的实心线,指向被拥有者 上图中,老师与学生是双向关联,老师有多名学生,学生也可能有多名老师。...【代码体现】:成员变量 【箭头及指向】:空心菱形的实心线,菱形指向整体 5. 组合(Composition) 【组合关系】:是整体与部分的关系, 但部分不能离开整体而单独存在....【代码表现】:局部变量、方法的参数或者对静态方法的调用 【箭头及指向】:箭头的虚线,指向被使用者

    2K40

    UML各类关系介绍

    继承关系(generalization) 继承关系用一条空心箭头的直线表示。...注意:表现在代码中,被关联类以类属性的形式出现在关联类中,也可能是关联类引用了一个类型为被关联类的全局变量。...UML类关系图示例 请看以下这个UML类关系图: 开车的类图结构表示的是一个接口 有一个自行车的抽象类,实现了开车的接口,它们之间的关系为实现关系,使用空心三角箭头的虚线表示 自行车与摩拜单车之间是继承关系...,使用空心三角箭头的实线表示 学生上学需要用到摩拜单车,与摩拜单车是一种依赖关系,使用箭头的虚线表示 学生与身份证之间为关联关系,使用一根实线表示,如果两个类之间互相通过属性引用,则是双向关联关系...学生与班级、学生与学校之间是聚合关系,使用空心菱形箭头的实线表示 学校与班级是组合关系,使用实心菱形箭头的实线表示

    48820

    2018-12-20 一文读懂UML 类图class diagram

    箭头指向】:三角箭头的实线,箭头指向父类 ?...image.png 2.实现(Realization) 【实现关系】:是一种类与接口的关系,表示类是接口所有特征和行为的实现 【箭头指向】:三角箭头的虚线,箭头指向接口 ?...双向的关联可以有两个箭头或者没有箭头,单向的关联有一个箭头。 【代码体现】:成员变量 【箭头及指向】:普通箭头的实心线,指向被拥有者 ?...【代码体现】:成员变量 【箭头及指向】:空心菱形的实心线,菱形指向整体 ? image.png 组合(Composition) 【组合关系】:是整体与部分的关系....【代码表现】:局部变量、方法的参数或者对静态方法的调用 【箭头及指向】:箭头的虚线,指向被使用者 ?

    49030

    分分钟弄明白UML中泛化 , 实现 , 关联, 聚合, 组合, 依赖

    箭头指向】:三角箭头的实线,箭头指向父类 ? 2. 实现(Realization) 【实现关系】:是一种类与接口的关系, 表示类是接口所有特征和行为的实现....【箭头指向】:三角箭头的虚线,箭头指向接口 ? 3. ...双向的关联可以有两个箭头或者没有箭头,单向的关联有一个箭头。 【代码体现】:成员变量 【箭头及指向】:普通箭头的实心线,指向被拥有者 ?...【代码体现】:成员变量 【箭头及指向】:空心菱形的实心线,菱形指向整体 ? 5. 组合(Composition) 【组合关系】:是整体与部分的关系, 但部分不能离开整体而单独存在. ...【代码表现】:局部变量、方法的参数或者对静态方法的调用 【箭头及指向】:箭头的虚线,指向被使用者 ?

    7.4K102

    从青铜到王者10个css3伪类使用技巧和运用

    青铜-4、伪类after实现的三角箭头 实现原理:三边设置边框,箭头指向的那个方向的border不用设置,位于箭头两边的边框颜色为透明(transparent),对边为主体边框颜色(较大的)/主体背景颜色...(较小的),因为我们要有边框颜色的三角箭头,当第一个箭头(较大的)被第二个箭头(较小的)通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了,其颜色就是较大的那个三角箭头的颜色,可调。...而较小的那个三角箭头的颜色要设置成主体颜色,进行负值定位偏移时要把主体边框盖住,从而与主体合在一起了 <img alt='' src='http:...青铜-6、伪元素实现<em>带</em>角度的底部边界(倾斜的边界) 原理:修改webkit-transform: skewY属性来修改倾斜度(旋转也是一样的道理) .edge--bottom { position...特性兼容性问题的<em>JS</em>库 最后 CSS的世界很美好,每个知识点都可以值得深入研究和实践,对于伪类、伪元素也有很多土味特效可以写出来,比如说图片遮罩、图片背景模糊,更多高级的鼠标经过事件特效等等,上边的10

    86130

    UML简介与类图详解

    1.2 UML起源与发展 UML的出现,起源于三位面向对象大师对各自方法的结合与统一: 由Booch创作的Booch方法 由Jacobson创作的OOSE、Martin/Odell方法 由Rumbaugh...3.2.1 接口关系(实现关系) 接口关系,也称实现关系,用三角箭头+虚线,箭头指向接口的形式,表示类是接口所有特征和行为的实现 3.2.2 依赖关系 依赖关系,描述的是一种使用关系,即一个类的实现需要另一个类的协助...,用普通箭头+虚线,普通箭头指向被使用者的形式表示 3.2.3 继承关系(泛化关系) 继承关系,也称泛化关系,用三角箭头+实线,箭头指向父类的形式,表示子类继承父类的所有特征和行为 3.2.4...,用空心菱形+实线,空心菱形指向整体的形式表示 3.2.6 关联关系 关联关系,描述的是不同类的对象之间的结构关系,用普通箭头+实线,箭头指向被关联者的形式表示。...双向的关联可以有两个箭头,或者没有箭头。单向的关联有一个箭头。 4 总结 本篇介绍了UML类图的基础知识,包括2种和6种关系,并通过visio软件,演示如何画出一个UML类图

    40820

    设计模式之常见关系

    使用三角箭头的实线表示继承,其中箭头指向的是父类 接口与实现 在java中一个类只能继承一个父类,但是可以实现多个接口 使用的是三角的虚线表示,其中箭头指向的是接口 依赖 是一种使用关系,即一个类的实现需要另外一个类的协助...代码体现: 成员变量 普通箭头的实心线,指向被拥有者 聚合 是整体和部分的关系,且部分可以离开整体而单独的存在。...车和轮胎是整体和部分的关系,但是轮胎离开车还是可以单独存在的 代码体现: 成员变量 空心菱形的实心线,菱形指向整体 组合 是整体和部分的关系,但是部分不能离开整体而单独存在 代码体现:成员变量...实心菱形的实线,菱形指向整体

    74330

    UML学习小结

    箭头指向】:三角箭头的实线,箭头指向父类 2. 实现(Realization) 【实现关系】:是一种类与接口的关系,表示类是接口所有特征和行为的实现....【箭头指向】:三角箭头的虚线,箭头指向接口 例如:鸽子(pigeon)是鸟类中的一种,可以实现一个飞行的接口。 3....双向的关联可以有两个箭头或者没有箭头,单向的关联有一个箭头。 【代码体现】:成员变量 【箭头及指向】:普通箭头的实心线,指向被拥有者 4....【代码体现】:成员变量 【箭头及指向】:实心菱形的实线,菱形指向整体 6....【代码表现】:局部变量、方法的参数或者对静态方法的调用 【箭头及指向】:箭头的虚线,指向被使用者 各种关系的强弱顺序: 泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖 上面有关UML类图的总结转自

    55620
    领券