教程 > 组件 > 基本组件

基本组件

左侧工具栏切换到”组件“图标,即可使用摹客提供的各种组件、形状等。

矩形

  • 从左侧基本组件中拖出矩形,即可直接使用。(快捷键是R)
  • 你可以对矩形大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。
  • 双击组件或使用Enter键,可对矩形内添加文本信息。

矩形属性

在右侧属性面板中,可以设置矩形内文本的样式。还可以改变矩形的透明度,填充色、描边、阴影、圆角等属性。另外,矩形的四个边框都可以去掉哦。

  • 从左侧基本组件中拖出圆形,即可直接使用。(快捷键是O)
  • 你可以对圆形大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。
  • 双击组件或使用Enter键,可对圆形内添加文本信息。

圆属性

在右侧属性面板中,可以设置圆形内文本的样式。还可以改变圆形的透明度,填充色、描边、阴影等属性。

多边形

使用多边形组件,可以自由定制多边形的边数。

  • 从左侧基本组件中拖出多边形,即可直接使用。
  • 你可以对多边形大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。
  • 双击组件或使用Enter键,即可对多边形添加文字信息。

多边形属性

在右侧属性面板中,可以设置多边形的填充色、边框、阴影、边数等属性,边数自由定制。

线条

  • 从左侧基本组件中拖出线段,即可直接使用。(快捷键是L)
  • 你可以对线段长度随意拉伸,按住Shift,可以更好地控制线条拉伸方向。
  • 双击组件或使用Enter键,可对线段内添加文本信息。

线条属性

  • 在右侧属性面板中,可以设置线段内文本的样式。还可以改变线段的透明度、描边、阴影等属性。
  • 在扩展属性中,还可以给线段添加起始箭头,可以用作标注工具。

文本

摹客的“文本”组件,同时支持单行、多行文本,并且支持富文本编辑、自动填充文字,功能强大。

  • 从左侧基本组件中拖出文本,即可直接使用。(快捷键是T)
  • 按Enter键或鼠标双击,即可对文本进行编辑。

自动填充文字

如果需要快速填充内容占位。选中文本组件,右键->“自动填充文字”,文本框将会自动填充内容。

文本属性

在右侧属性面板中,可以设置文本字体、颜色、首行缩进、竖排文字、透明度、描边、阴影等属性,支持改变局部文字的样式。

图片

  • 从左侧基本组件中拖出图片,即可直接使用。(快捷键是I)
  • 你可以对图片大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。

图片属性

  • 在右侧属性面板中,可以设置图片的透明度、描边、阴影、圆角等属性。
  • 在扩展属性中,还可以改变图片的填充方式:拉伸、平铺、适应、填充。
  • 你还可以手动调整图片的颜色效果,包括色相、饱和度、亮度、对比度、反相。
  • 勾选“模糊”选项,还可以为图片添加模糊效果。

上传图片

选中图片组件,双击组件或使用Enter键会出现上传图片的弹窗,单击上传图片。图片上传完成后,可选择图片尺寸为组件大小或图片本身的大小。还可以勾选是否保持宽高比。除此之外,还支持上传Gif动图哦!

图片裁切

使用图片裁切功能,可以对已上传的图片尺寸、内容进行调整。

选中图片,在右键菜单中,点击“裁切”,即可进入裁切状态。

选择需要的图片区域后,点击“裁剪”,可以保留框选部分。

如果点击“复制”,可以克隆出框选部分,不影响原图。

点击“剪切”,则会将框选部分镂空。

图片切割

鼠标放在图片的任意位置右键->"切割",可以快速将一张图片切割成4个部分,以鼠标所在的位置为中心点进行切割。切割后,还可以调整局部区域大或者位置。

按钮

按钮在界面上的运用非常广泛,摹客原型设计中的按钮默认是带有圆角的。

  • 从左侧基本组件中拖出按钮,即可直接使用。(快捷键是B)
  • 你可以对多边形大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。
  • 双击组件或使用Enter键,即可对按钮内文字进行编辑。

按钮属性

在右侧属性面板中,可以设置按钮的文本颜色、填充色、边框、阴影、圆角等属性。

单行输入框

  • 从左侧基本组件中拖出单行输入框,即可直接使用。
  • 你可以对输入框大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。
  • 双击组件或使用Enter键,可对输入框内添加文本信息。

单行输入框属性

  • 在右侧属性面板中,可以设置单行输入框内文本的样式、透明度、填充、描边、阴影、圆角等属性。
  • 在扩展属性中,可以为单行输入框添加占位文字,还可以设置输入类型:文字、字母、密码。

多行输入框

  • 从左侧基本组件中拖出多行输入框,即可直接使用。
  • 你可以对多行输入框大小随意拉伸,如果需要等比例调整大小,按住Shift再拖动鼠标。
  • 双击组件或使用Enter键,可对多行输入框添加内容。

多行输入框属性

在右侧属性面板中,可以设置文本的样式、多行输入框的透明度、填充、描边、阴影等属性。