最近使用很多ide自带的组件,每个组件基本上都需要设置一下样式。这里,总结一下对于设置组件样式的一些方法。
组件都有(继承)一个 setStyle(style:String, value:Object):void 的方法。
第一点:设置组件的字体
(假设组件叫 myComponent ,字体样式叫 myTextFormat)
想改组件字体,那么就写 myComponent.setStyle(”textFormat”,myTextFormat);
这样,对于文本组件,如TextArea,Label,TextInput就达到修改字体样式的效果了;
部分组件有textField属性,那直接设置他也可以。
但是有些组件不简单是文本,比如List组件,就得使用他继承SelectableList的setRendererStyle(name:String, style:Object, column:uint = 0):void方法
myList.setRendererStyle(”textFormat”,myTextFormat);
而ComboBox组件是由 TextInput 和 List 组合而成的,那就需要分开设置
myComboBox.textField.setStyle(”textFormat”,myTextFormat);//顶部显示字体样式
myComboBox.dropdown.setRendererStyle(”textFormat”, myTextFormat);//下拉选相里的字体样式
第二点:更改组件的外观
拿ScrollPane举例,假如我们想更改这个组件的背景。打开帮助,找到介绍他样式的地方;通过说明一栏的介绍,知道负责背景的是upSkin的样式,知道了这个,我们可以动手写代码了:
//我们创造了一个具有红色背景的ScrollPane实例
import fl.containers.ScrollPane;
import flash.display.Shape;
import flash.display.Graphics;
var myBg:Shape=new Shape();
myBg.graphics.beginFill(0×990000);
myBg.graphics.drawRect(0,0,10,10);
myBg.graphics.endFill();
var myScrollPane:ScrollPane =new ScrollPane();
myScrollPane.setStyle(”upSkin”,myBg);
//myBg还可以是库里面导出的类(不需要实例化)
addChild(myScrollPane);
你还可以把myBg换成Sprite,MovieClip类型,创造复杂,甚至是动画的背景。
同理,可以改变其他地方的外观,比如上下方向键,滚动条等。
组件有非常多的样式,名字都记不住,用到的时候,重复上面的步骤,就可以了。
分享到:
相关推荐
创建一个自定义组件需要在小程序的`components`目录下新建一个文件夹,用于存放该组件的代码。这个文件夹里包含四个文件:`.wxml`、`.wxss`、`.js`和`.json`。 - `.wxml`文件定义了组件的结构; - `.wxss`文件定义...
如果你希望在组件级别控制样式,内联样式可能是最直接的方法,如: ```jsx const MyStyledComponent = () => { return , fontSize: '20px' }}>Hello, World!</p>; }; ``` 另外,如果你使用CSS-in-JS库(如styled-...
Raize Components是一系列经过精心设计和优化的VCL(Visual Component Library)组件,它们不仅外观精美,而且在性能和稳定性上都有出色的表现。这些组件涵盖了用户界面的各种需求,包括按钮、表格、对话框、日历、...
为了解决这个问题,开发者可以借助“mp-html”组件,它是一个专门为微信小程序设计的富文本解析库,能够有效地解析和展示各种HTML样式,确保内容的完整性。 本文将深入讲解如何使用“mp-html”在小程序中实现富文本...
vue样式的组件示例 基于Vue-CLI 3的vue样式化组件示例 项目设置 使用Vue-CLI 3创建Vue项目 vue create vue-styled-components-example cd vue-styled-components-example 添加vue样式的组件 yarn add vue-styled-...
在components-richText文件夹中,我们可以找到实现上述功能的自定义组件代码。这个组件可能包含了对HTML字符串的解析、html2json的调用、以及对rich-text组件的扩展。通过阅读和理解这些代码,我们可以学习到如何在...
"components"目录通常存放Vue组件代码,这些组件可能包含了富文本编辑器的核心功能,比如文本输入、样式设置、图片上传、链接插入等。在Vue项目中,你可以通过import语句将这些组件引入,并在模板中使用它们。富文本...
2. **配置使用**:在需要使用富文本的地方,通过`<mp-html>`标签来引入,并设置相应的属性,如`html`属性用于传递HTML字符串,`selectable`属性可以用来控制文本是否可选中,通常在iOS上需要设置为`true`。...
Esri的Calcite设计框架的共享Web组件。 要查看实际使用的组件,请。 草图库 提供了所有方解石组件,其中包含所有变体和大小。 安装 npm install --save @esri/calcite-components 脚本标签 方解石组件可以通过HTML...
### flash ActionScript 组件使用实例知识点详解 #### 一、ActionScript组件概述 在《flash ActionScript 组件使用实例》文档中,详细介绍了如何利用ActionScript组件来开发Flash应用程序。对于已经熟悉Macromedia...
首先,让我们来看一下styled-components创建样式组件的基本语法。开发者可以利用styled-components提供的styled API,将一个React组件包装,并传入一个模板字符串,这个模板字符串包含了CSS样式规则。例如: ```...
`created` 钩子用于初始化数据,而 `mounted` 钩子则用于处理 DOM 渲染后的操作,如设置文本内容。`move` 方法是核心滚动逻辑,它计算元素的实际宽度,然后使用 `setInterval` 定时器更新 `scroll` 元素的 `...
### Vue单文件组件嵌套的方法及示例 #### 一、引言 随着前端技术的发展,Vue.js 成为了构建用户界面的一种流行选择。Vue 的一大特色是它的单文件组件(Single File Component,简称 SFC)。单文件组件允许开发者将...
`styled-components`库为开发者提供了一种优雅的方式,将样式直接与组件相结合,从而创建出既美观又可复用的UI组件。本文将深入探讨如何利用`styled-components`与其他React组件进行有效组合,以构建灵活的UI解决...
组件的wxml结构请看dist/components/下的组件 样式文件可直接引用dist/components/wux.wxss 插件及文档 ActionSheet - 上拉菜单 Backdrop - 背景幕 Barcode - 条形码 Button - 浮动按钮 Calendar - 日历 CountDown ...
在React开发中,CSS构造函数是一种管理组件样式的方法,它旨在提高代码的可维护性和模块化。这个概念是为了解决传统CSS与JavaScript之间松散耦合的问题,尤其是在大型项目中,这种耦合可能导致样式冲突和难以调试的...
总结,基于Element UI进行二次开发,需要理解Vue.js和Element UI的基本原理,掌握组件扩展、样式覆盖以及新组件创建的方法。通过这一系列步骤,我们可以为G7S构建出符合项目需求的前端组件和样式,提升应用的个性化...
其中"flashremoting_components_flash8.msi"是安装程序,用于在开发环境中设置Flash Remoting支持,而"新建 文本文档.txt"可能是详细的安装步骤或使用指南。对于那些需要在Flash项目中实现服务器通信的开发者来说,...