展开

关键词

SAP Spartacus 里的 icon

同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon ,比如下图的 iconTypes.RESET:需要调用 iconLoader 获取 RESET icon 对应的 动态创建新的 link 标签,并加载对应的 css:css 地址:https:use.fontawesome.comreleasesv5.8.1cssall.cssSAP Spartacus 所有支持的 icon 类型和提供这些 icon 形状的 css 文件 url,来自这个配置文件:projectsstorefrontlibsrccms-componentsmisciconfontawesome-icon.config.ts

6910

SAP Fiori图标(icon)原理

When you are creating a new button and assign an icon to it, there is no way for you to know exactly what does this “add” icon look like.? We can easily find the icon we need by search button.? icon code are hard coded.??? So the icon id for icon “accidental-leave” we find in icon browser page, e000, is just its corresponding

20920
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

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

    SAP Spartacus B2B 页面 info icon - 版本1.0

    现在的做法:引入了新的section标签,包裹cx-icon和h3:? 然后给这个section添加样式:??这个section确实需要吗? section { display: flex; cx-icon { align-self: flex-start; margin-top: 4px; color: var(--cx-color, var 原始的:?在detail header和detail children header,修改card可以同时覆盖这两处UI:?div class=title只影响这一小块区域:?

    11120

    ICON使用手册:如何一个优秀的图标?

    图标,即icon在界面中占有很重要的位置,决定一个界面风格的重要构成元素。一个好的图标,可以让用户“一秒即懂”,如何出优秀的图标,这篇文章给你解答。 软件都是越用越熟悉,所以一些新手ui师不要担心这个不会那个不会,跟着一些案例教学,基础的绘制过程都能了解。而静电的UI教室也会为大家带来系统的图标方法,欢迎大家了解报名。? a.内部一致性图标应该保持视觉统一,你决定用于你的产品的图标,应该保持统一样式。理想情况下,它们看起来应该是一位的。 很多师看到一个酷炫的图标,学着做但是配色、图层叠加等感官上总会有那么些差别。这就需要从整体上去考虑图片的,而不单单是学会一个图标的,多去尝试图标套系的,你会学到更多。 直面 · 那些三十多岁的师,都去哪儿了? 2019,UI师面对哪些机遇和挑战?(内有福利)师求职与面试的套路你了解吗?静Design·FM 14期 师用微软雅黑致公司损失2860W?

    92320

    iOS lanchImage 和icon

    1 icon置打开项目中的Assets.xcassets   这里边有一个icon 首先需要有icon 的尺寸尺寸如下:29*29   2x29*29   3x40*40  2x40*40   3x60 *60  2x60*60  3x注意:全部是直角的  不需要圆角然后将图片拖进去     从新运行一下程序就可以看到 icon图标了2 lanchImage首先在Assets.xcassets中  点击右键新建

    32350

    ICON

    ISE上用ILA 和 VIO 要结合 ICON 核;而在 vivado 中使用 ILA 不需要 ICON 的配合单独使用。 在Xilinx ISE环境下,Chipscope利用 ICON 核通过 FPGA 的 JTAG 端口与内核通信;ILA 核可以用来观察 FPGA 内部信号;VIO 核不仅可以观察信号,还可以将外部输入信号传到 ICON 简介ICON 控制器提供了JATG BSCAN 组件和 ChipScope 接口,包括集成逻辑分析仪、虚拟输入输出(VIO)、ChipScope监测测器和 ATC2。? ICON 添加ICON 在工程上位置如下图所示? ICON 最多可以连接15个 chipscope_icon ICON_inst ( .CONTROL0(control0)); 比如给 ICON 上连接一个VIO chipscope_vio ( inout

    28820

    适合前端开发 和UI 的20多个最佳 ICON

    免费的图标包灵感来自Material,并以三种不同的视觉风格呈现-圆形,轮廓和两色。 该套件有请输入代码6种不同的文件格式,因此我们可以使用首选软件中的图标。 人员可以轻松编辑所有图标。 它们首先被成一种图标字体,所以它是作为一种web字体嵌入的。 如果找不到自己喜欢的东西,或者只是想要专门为我们品牌的自定义图标,也可以与网站上的一些最佳师合作。 该网站的库由各种独立的图标文件组成。 在这里,创作者和创意专业人士可以合作销售他们的,并找到看似无穷无尽的高级图标库。搜索这个庞大而全面的图标库非常容易。

    29420

    [ISUX译]iOS 9 人机界面指南(五):图标与图形 - 腾讯ISUX

    一个有经验的师可以为你的app建立统一的视觉风格,同时把这种风格延续和浓缩到icon中。使用通用的易于辨识的图形。一般来说,避免使用意义不明的视觉元素,或者使用元素的次要含义。 最好是再往文件夹中多放几个不同的icon,然后看看你的app icon好看是否好看和突出。在icon中为你的app一个抽象释义。 一般来说,要避免在你的icon中复用任何特定备标志,因为这些标志的常常变化,而基于这些icon和图形很容易就会过时。不要在你的界面中复用iOS自带的app icon。 你不需要为这些文档重新图标,因为iOS会自动把你的app icon来作为这些文档的图标。 想要一套风格协调连贯的图标,一致性是关键:尽量让每个图标都使用相同的透视和粗细相同的线条。为了保证所有的icon尺寸视觉上统一,你可能需要一些实际上尺寸并不相同的icon

    35831

    ASP.NET MVC5+EF6+EasyUI 后台管理系统(47)-工作流-补充

    perm, Query, true) @Html.ToolButton(btnCreate, icon-add, 表单, perm, Create, true) @Html.ToolButton(btnEdit , icon-edit, 1.修改表单, perm, Edit, true) @Html.ToolButton(btnEditStep, icon-edit, 2.步骤, perm, Edit, true ) @Html.ToolButton(btnEditStepRule, icon-edit, 3.分支, perm, Edit, true) @Html.ToolButton(btnEditLayout , icon-edit, 4.布局, perm, Edit, true) @Html.ToolButton(btnDetails, icon-details, 查看详情, perm, Details , true) @Html.ToolButton(btnDelete, icon-remove, 删除, perm, Delete, true) ?

    42370

    【Flutter 专题】30 图解自定义底部状态栏 ACEBottomNavigationBar (一)

    和尚首先了解了一下 BottomNavigationBar,主要由整体填充布局与子NavigationItem,和尚也是这样的,但 BottomNavigationBar 的配置部分主要是在 BottomNavigationBar 中完成的,而 BottomNavigationBarItem 可以看作只是一个单纯的实体类,和尚认为这样的好处就是统一管理,减少冗余配置等;而和尚为了配置项更多更灵活选择在 NavigationItem 尝试一:类型确定 和尚尝试用枚举类型确定不同的样式,明确且方便,延展性也较好;enum ACEBottomNavigationBarType { normal, 普通类型,选中变色,样式不变 zoom 注意事项ACEBottomNavigationBarType 为状态栏样式,默认为 nomal 类型,支持文字和图片icon 颜色切换;和尚尝试时对图片置成图片和 icon 两种,icon 类型支持颜色绘制 ,而图片支持选中和未选中两张图切换;同时如果置图片和 icon 两种,优先使用图片样式;同时用户对于两张图样式时可以只置一张未选中状态图;同时支持图片和 icon 两种方式共存;和尚 NavigationItem

    56741

    精通ReactVue系列之实现一个全局提示(Message)组件

    ,本文主要介绍思路和的方法。 如果对模式不是很了解,可以移步:15分钟带你了解前端工程师必知的javascript模式(附详细思维导图和源码).正文在开始组件之前希望大家对css3和js有一定的基础,并了解基本的reactvue 接下来我们来看看通知提醒框(Message)的具体思路。1. Message组件思路按照之前笔者总结的组件原则,我们第一步是要确认需求. 具体的细节可以参考我的上一篇Notification组件的文章。2. 基于react实现一个全局提示(Message)组件组件的核心部分我们还是采用React Notification的模式。 2.1 搭建通知提醒框(Notification)的基本骨架首先按照笔者的代码风格,一般会考虑组件的框架,然后再一步步往里面填充内容和逻辑。通过这种渐进式的思路,能让我们逻辑更严谨,更清晰。

    1.1K10

    Ant Design 是怎么管 Icon 的?

    Ant Design 的 Icon,是在确定和自然的价值观影响下的一套美观、一致、易用、便于延展的图标体系;注:antd 价值观https:ant.designdocsspecvalues-cn 图1:Ant Design 的 Icon(线框风格)图2:Ant Design 的 Icon(填充风格)图3:Ant Design 的 Icon(双色风格)—— https:ant.designcomponentsicon-cn1 :cloudfour.comthinksseriously-dont-use-icon-fontshttps:css-tricks.comicon-fonts-vs-svg2. antd 的图标基本规则 尺寸画板尺寸: 1024px * 1024px;出血位:64px; 3. 如何使用 antd 的 Icon? 3.1. 常规用法直接通过 的 type 和 theme 指定图标。3.2. 图:用 SVG 画了个小矩形SVG 绘图、坐标系、动画相关知识给大家安利下面这个教程慕课 SVG 教程网址:走进SVG:https:www.imooc.comlearn1435. antd 的 Icon

    1.9K30

    Hugo构建静态站点入门

    丑就算了,还不允许别人修改其,结果就是,再好的 UI 也毁在这些插件手里了。还好我发现了一款简单高效的社交分享组件,只看一眼便可以确认这就是我要寻找的那个它。 它有以下这些特点:一个标签完成初始化 自定义启用禁用分享站点 更美观的 UI 体验 基于标签data属性轻松实现分享数据的自定义 支持分别对不同站点置分享内容 同页面个分享组件 支持npm安装2. important} .social-share .icon-tencent:before{content:f07a} .social-share .icon-qq:before{content:f11a .icon-douban:before{content:f10a} .social-share .icon-heart:before{content:f20a} .social-share .icon-like {content:f01a} .social-share .icon-diandian:before{content:f05a} .social-share .icon-facebook:before{

    27120

    Hugo集成社交分享插件

    丑就算了,还不允许别人修改其,结果就是,再好的 UI 也毁在这些插件手里了。还好我发现了一款简单高效的社交分享组件,只看一眼便可以确认这就是我要寻找的那个它。 它有以下这些特点:一个标签完成初始化 自定义启用禁用分享站点 更美观的 UI 体验 基于标签data属性轻松实现分享数据的自定义 支持分别对不同站点置分享内容 同页面个分享组件 支持npm安装2. important} .social-share .icon-tencent:before{content:f07a} .social-share .icon-qq:before{content:f11a .icon-douban:before{content:f10a} .social-share .icon-heart:before{content:f20a} .social-share .icon-like {content:f01a} .social-share .icon-diandian:before{content:f05a} .social-share .icon-facebook:before{

    44210

    将你的网站打造成一个iOS Web App

    本文简单介绍一下如何把一个Web站点改造成iOS上的Web App,这里假你的网站是响应式(responsive design)或者已经做过移动端的适配。 viewport我们在HTML中加上viewport(这里假用户已经对viewport有所了解) meta标签: 其中width=device-width指的是移动浏览器所显示的宽度等于备的物理宽度 如果你的网站也要可以在Ipad上访问,那么你还要针对不同的备准备不同尺寸的icon,你可以通过sizes属性来指定icon的尺寸: 如果你不指定size属性,那么默认为57x57,我们可以看到ipad 如果没有当前备所需尺寸的icon,那么iOS将会选用icon中所有大于此备所需尺寸的最小的一个。如果没有比备所需尺寸大的icon,那么选用最大的那个icon。 假备需要57x57的icon,那么iOS将以下面的顺序进行访问:apple-touch-icon-57x57-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-precomposed.pngapple-touch-icon.png

    84560

    Sketch的下载与安装

    因为他是一款十分出色的软件,我们可以根据他进行很多移动端包括PC端的页面,同时呢他的学习成本要比很多软件的学习成本低很多,比如我们常见的ps,ai等他们的学习成本是很高的,不过他的学习成本低不代表他的功能弱 ,我在使用的时候其实一度觉得他很多地方比一些成熟的ui软件还强大,它还可以直接将好的icon进行css和svg代码的导出,那么前端的程序员就可以直接拿来用的,然后它还可以将阿里的svg图直接放到里面进行编辑 ,或者我们自己好的icon直接上传到阿里的矢量图库,供他人使用,唯一的遗憾就是这个软件不支持windows,他只有mac版本的,所以这个下面的几节教程都是针对mac进行编写的。 官网觉得没必要看我写的可以直接看文档,帮你们找好了 中文文档优点易学功能强大一键导出css样式代码一键导出svg代码将阿里svg代码直接拖进去编辑自己好的svg直接可以上传到阿里矢量图库供他人使用不吃显卡直接切图利用插件一键切图利用模版直接创建常见的 为了提高你们看的兴趣,提前给你们看一下我准备做的几个icon,下一篇文章我们就做这个四个icon,都是一些比较简单的icon,练练手的同时认识一下简单的功能! ?

    16210

    手把手带你学习微信小程序 —— 十(icon 标签【微信默认标签】)

    icon 标签一、icon 体验1.1 icon 的三个属性1.2 icon 的基本使用二、实际项目2.1 微信支付界面支付成功展示2.2 跳转等待界面2.3 搜索栏实现一、icon 体验先看一张图上图展示的图标便是微信提供的 ,我们可以直接使用的图标1.1 icon 的三个属性icon 的使用简单,它只有三个属性icon 类型 type 分为 :success, success_no_circle, info, warn, waiting, cancel, download, search, clear ,分别对应上图的每一个图标icon的大小:通过 size 属性进行icon 的颜色,通过 color 进行修改(同css 中的color)1.2 icon 的基本使用icon>icon>icon>icon>icon>icon>更多有趣的内容请自行尝试二、实际项目2.1 微信支付界面支付成功展示界面分析:icon:view :操作进行中… ,后面的数字是动态变化的,通过js 传值button:取消wxss 样式:基本和上面一样js 实现倒时2.3 搜索栏实现 项目分析: 1.源码在Github 上,有需要的同学请自取~

    7310

    移动端重构实战系列5——form元素

    粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么些不同的,大概有以下几点用户体验差别:输入框可点击范围右边的箭头可点击范围line list95%都是整行点击,所以不管你点哪 ,都是触发整行的点击事件,右边的箭头就是个指引而已,所以伪元素生成是没有问题的;而form就不一样了,右边箭头是真的要挂载事件的,所以除了直接使用元素外,点击范围一定要合理,总不能箭头多大就多大,那操作起来就不方便了 ,同理input框我们也需要成整行的高度,方便点击输入。 、question、ok,demo可在sheral icon查看,样式定义在sandalext_icons.scss中,代码如下:.icon-alert{ color: $red; &::after{ ; }}.icon-info{ color: $blue; &::after{ content: i; }}.icon-question{ color: $blue; &::after{ content

    45150

    移动端重构实战系列5——form元素

    粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么些不同的,大概有以下几点用户体验差别:输入框可点击范围右边的箭头可点击范围line list95%都是整行点击,所以不管你点哪 ,都是触发整行的点击事件,右边的箭头就是个指引而已,所以伪元素生成是没有问题的;而form就不一样了,右边箭头是真的要挂载事件的,所以除了直接使用元素外,点击范围一定要合理,总不能箭头多大就多大,那操作起来就不方便了 ,同理input框我们也需要成整行的高度,方便点击输入。 、question、ok,demo可在sheral icon查看,样式定义在sandalext_icons.scss中,代码如下:.icon-alert{ color: $red; &::after{ ; }}.icon-info{ color: $blue; &::after{ content: i; }}.icon-question{ color: $blue; &::after{ content

    13920

    Android 12上全新的应用启动画面,还不适配一下?

    也许官方也注意到了这点,便精心了Splash Screen API,并在Android 12里重磅推出。有了这个全新特性的帮助,启动画面的定制将更加自由、方便。 自定义动画Icon动画形式的Icon可以增添和创意,使得启动流程更加流畅和有趣。 You can calculate the remaining duration of the icon animation.简言之,退出画面回调的时候Icon动画可能进行到了一半,最好Icon动画的剩余时长来执行退出动画 此时Icon动画尚在进行当中,可以将Icon动画的预时长的剩余时间交接给退出效果来执行性能差的话,画面退出的回调稍晚。 = splashScreenView.iconAnimationStartMillis 再结合当前时间算出Icon动画的剩余时长 1.

    51830

    相关产品

    • 设计协作平台

      设计协作平台

      腾讯自研的产品设计研发一站式协作平台,支持在线导入预览Sketch设计稿、自动生成设计标注切图,灵活调用图标库、素材库,支持多种插件上传,让产品设计更轻松高效。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券