material theme 自定义_Material Theme Editor-组件库

Material Theme Editor一键选择创建 Material 主题且方便同时自定义多个组件

安装

重启 Sketch 开始使用

使用

1.执行 Plugins > Material > Open Theme Editor...

2.第一次执行可选择编辑主题,并生成保存主题 Library(后续可直接选择已保存主题 Library 或重新选择)

选择颜色

1.通过选择主要、次要、背景以及文本和图标色彩,自动将颜色应用于所有组件

2.检查色彩对比以符合无障碍要求

3.从 Material 调色板中选择颜色

4.使用单一颜色自动生成 10 个颜色值的色调

5.全局颜色更改自动更新 Symbol

设置形状

1.选择形状和圆角风格

2.从圆角或切角样式中进行选择,并自动将更改应用于 Material 组件

3.材质库中的组件中使用对称和非对称形状进行预览,同时保留在当前 Material Design 指南中

添加字体

1.最多可为主题添加3个字体

2.基于 Material 排版指南自动调整和优化字体的可读性

3.预置 Google 热门字体,包括:Roboto、Raleway、Alegreya、Merriweather、Rubik、Oswald 等

探索图标

1.通过风格化的系统图标表达品牌:提供五种主题和一系列格式、尺寸和密度

2.从填充、圆润、锐利、轮廓和双色图标主题中进行选择

更多

1.系统环境需要 macOS High Sierra 10.13 或更高版本

2.该插件提供对 Material 组件库,Material 主题(用于 Sketch)的访问,并可直接将画板上传到 Gallery

3.在 Gallery 中使用插件创建的设计可自动生成在线访问链接

基本信息

收录版本 1.2.197068241

更新时间 2018-5-18

更新内容 适配 Sketch 50.x

亲!小编正在上传资源中,请稍等。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Monaco Editor是一款基于浏览器的代码编辑器,提供了丰富的API和功能。要在Monaco Editor中插入图标,可以按照以下步骤进操作: 1. 导入所需的图标:Monaco Editor默认情况下不包含图标,因此需要首先导入所需的图标。可以使用第三方的字体图标,如Font Awesome或者Material Icons。将图标的CSS文件引入到页面中。 2. 创建一个自定义的编辑器主题:要在Monaco Editor中插入图标,首先需要创建一个自定义的编辑器主题。可以参考Monaco Editor的官方文档,了解如何创建和使用自定义主题。 3. 在编辑器中插入图标:通过使用Monaco Editor提供的Decorations API,在编辑器的指定位置插入图标。可以使用装饰器(decorators)来设置编辑器中的任何位置,并添加自定义样式和图标。 以下是一个简单的示例代码,用于在Monaco Editor中插入一个"保存"的图标: ```javascript // 导入图标的CSS文件 import 'font-awesome/css/font-awesome.min.css'; // 创建一个自定义的编辑器主题 monaco.editor.defineTheme('custom-theme', { base: 'vs', inherit: true, rules: [ { token: 'save-icon', foreground: 'blue', fontStyle: 'bold' } ], colors: {} }); // 在编辑器中插入图标 const decorations = editor.deltaDecorations([], [ { range: new monaco.Range(1, 1, 1, 1), options: { isWholeLine: true, glyphMarginClassName: 'save-icon' } } ]); // 将主题应用到编辑器 monaco.editor.setTheme('custom-theme'); ``` 通过以上步骤,我们就可以在Monaco Editor中成功插入图标了。请注意,在实际使用中,可以根据需要调整图标位置、样式和主题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值