package
{
import flash.text.TextFieldAutoSize;
import mx.controls.Button;
public class WrappingButton extends Button
{
public function WrappingButton()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
textField.multiline = true;
textField.wordWrap = true;
textField.autoSize = TextFieldAutoSize.CENTER;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
textField.y = (this.height - textField.height) >> 1;
height = textField.height + getStyle("paddingTop") + getStyle("paddingBottom");
}
}
}
引用时:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<local:WrappingButton label="The quick brown fox jumped over the lazy dog." width="100" paddingTop="10" paddingBottom="10" />
</mx:Application>
参考文档:
http://stackoverflow.com/questions/1654403/adobe-flex-word-wrap-in-button-label
分享到:
相关推荐
在Flex布局中,Button组件是一个基本的交互元素,通常包含一行文本和可选的图标。默认情况下,Button的文本是单行显示的,并且超出的部分会被截断。如果想要改变这一行为,我们需要对Button进行自定义。 3. 重载...
一个`itemRenderer`就是一个小的MXML或ActionScript组件,它可以是自定义的类,也可以是Flex内置组件的子类,如Label、Button等。 2. **创建自定义itemRenderer** 首先,我们需要创建一个自定义的`itemRenderer`...
在本篇内容中,我们将深入探讨如何在Flex文件中利用HTML来渲染文本,并结合实例代码进行解析。通过本文,读者可以全面了解Flex框架下HTML文本渲染的方法与应用场景,以及如何结合Flex组件完成多媒体控制功能。 ### ...
### 使用工具提示(Tooltips)在Flex中的实践与技巧 #### 一、引言 在用户界面设计中,工具提示是一种非常实用的功能,它能够为用户提供即时的帮助信息,提高用户体验。Adobe Flex作为一种广泛使用的RIA(Rich ...
在网页设计和开发中,按钮(Button)是用户界面中不可或缺的元素,它通常用于触发某种操作或导航至其他页面。"宽度自适应的按钮"是现代网页设计的一个重要特性,这种按钮能够根据其内容或者容器的宽度自动调整大小,...
5. Label:单行文本显示,不支持换行。 三、使用Flash设计Flex组件样式 Flex中可以使用Flash元件的9切片缩放属性来设计组件样式。样式表中可以设置图片为组件样式,通常使用PNG格式。SWF文件可以存储所有样式,然后...
1. **TextComponent类**:这是Flex中所有文本组件的基础类,包括Label、Button、TextArea和TextInput等。了解这个类的基本属性和方法对于文本设计至关重要。 2. **样式和格式**:Flex支持通过CSS来控制文本的样式,...
确保使用适当的`tabindex`和`aria-label`属性以提高可访问性。 10. **CSS预处理器**:为了代码组织和复用,可以考虑使用Sass或Less等CSS预处理器。这样可以创建模块化的样式,比如键的样式可以封装在单独的混合或...
- `<button>`: 创建可点击的按钮。 9. **其他标签**: - `<command>`: 定义命令按钮。 - `<details>`: 显示或隐藏详细信息。 - `<dialog>`: 创建对话框。 - `<abbr>`: 用于定义缩写。 - `<address>`: 显示...
使用 `display: flex` 和 `flex-wrap: wrap` 属性,可以确保按钮在一行内显示不下时自动换行。 对于“属性可自行修改”,这意味着开发者应提供足够的灵活性,允许根据项目需求定制按钮的样式、行为和响应式特性。...
4. 响应式设计:针对不同屏幕尺寸,可以通过媒体查询(media queries)来改变样式,例如将登录按钮在小屏幕上换行显示: ```css @media (max-width: 600px) { form { flex-direction: column; } button { ...
- **自动换行**:使用 `word-wrap: break-word;`。 这些属性可以帮助优化文本显示,使其更加美观。 #### 常见行内元素 - `a`:链接标签。 - `span`:用于包裹行内元素,不影响其他元素。 - `i`:斜体标签。 - `...
在登录表单的设计中,Bootstrap的预定义类可以用于创建表单元素,如`<form>`, `<input>`, `<label>`和`<button>`。这些元素可以与Flexbox结合,通过设置`display: flex`和`align-items: center`等属性,实现表单元素...
- `display: flex`和`flex-wrap`属性使容器中的元素在空间不足时换行,实现响应式布局。 - `@media screen and (max-width: some-value)`检查屏幕宽度,应用特定的CSS规则。 5. **链接与资源**: - 在示例中,...
- `<form>`定义表单,`<input>`、`<textarea>`和`<select>`用于输入数据,`<button>`创建按钮,`<label>`关联输入元素。 - `type`属性指定`<input>`的类型,如文本(text)、密码(password)、复选框(checkbox)...
- `<label>`标签:为输入字段提供描述性文本,与`<input>`标签配合使用,提高可访问性。 - `<textarea>`:用于多行文本输入。 - `<button>`:创建可点击的按钮,可以是提交或重置表单。 - `<fieldset>`和`...
9. **表单元素**:如`<form>`, `<input>`, `<label>`, `<button>`,用于构建交互式表单。 10. **CSS内联样式**:`style`属性可以在HTML元素中直接应用CSS样式。 【项目可能涉及的HTML布局技术】 1. **Flexbox布局**...
- **换行标签** ` `:用于插入换行。 - **水平线标签** `<hr/>`:用于定义一个简单的水平线,通常用于分割内容或视觉上的分割。 - **斜体标签** `<em>` 和 **粗体标签** `<strong>`:分别用来表示强调和重要...
2. **文本格式化**:`<h1>`到`<h6>`定义标题,`<p>`用于段落,`<b>`和`<i>`分别用于粗体和斜体文本,` `用于换行,`<strong>`和`<em>`用于强调文本。 3. **链接与导航**:`<a>`标签创建超链接,链接到其他网页或...
- `<form>`用于创建表单,`<input>`定义输入字段,`<label>`关联输入与描述,`<button>`创建按钮。 - `type`属性(如`text`, `email`, `password`, `submit`等)定义输入类型。 9. **交互性**: - JavaScript常...