Flex Multiline Button

Flex Multiline Button

Posting mostly so I can find this again quickly.

UPDATE: posted working example (the code below does work). Right click – view source.

Basically stolen straight from Alex’s Flex Closet, but a button (not radio button), fixed casting, and just included the referenced class in the same file (less flexible, but, more convenient, maybe). Anyway – use just like a button but has multiple lines.

package components.multiLineButton
{
import flash.display.DisplayObject;
import flash.text.TextLineMetrics;

import mx.controls.Button;
import mx.core.IFlexDisplayObject;
import mx.core.mx_internal;
use namespace mx_internal;

public class MultiLineButton extends Button
{
public function MultiLineButton()
{
super();
}

override protected function createChildren():void
{
if (!textField)
{
textField = new NoTruncationUITextField();
textField.styleName = this;
addChild(DisplayObject(textField));
}

super.createChildren();

textField.multiline = true;
textField.wordWrap = true;
textField.width = width;
}

override protected function measure():void
{
if (!isNaN(explicitWidth))
{
var tempIcon:IFlexDisplayObject = getCurrentIcon();
var w:Number = explicitWidth;
if (tempIcon)
w -= tempIcon.width + getStyle("horizontalGap") + getStyle("paddingLeft") + getStyle("paddingRight");
textField.width = w;
}
super.measure();

}

override public function measureText(s:String):TextLineMetrics
{
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = textField.textWidth + 4;
lineMetrics.height = textField.textHeight + 4;
return lineMetrics;
}
}
}
import mx.core.UITextField;

class NoTruncationUITextField extends UITextField
{
public function NoTruncationUITextField()
{
super();
}
override public function truncateToFit(s:String = null):Boolean
{
return false;
}

}


转载:http://www.forestandthetrees.com/2008/03/11/flex-multiline-button/

提取下面内容的所有中文<template> <a-card> <a-row type="flex" justify="space-between" style="margin-bottom: 10px;"> <a-radio-group v-model:value="detailType"> <a-radio-button value="contrast">{{ $t('community_contribution.contrast') }}</a-radio-button> <a-radio-button value="trend">{{ $t('community_contribution.trend') }}</a-radio-button> </a-radio-group> <span> <span class="tool-style"> <span>仓名:</span> <a-select style="width: 200px;"> </a-select> </span> <span v-if="detailType === 'contrast'" class="tool-style"> <span>{{ $t('community_contribution.dimensions') }}:</span> <a-radio-group v-model:value="orgType"> <a-radio-button value="year_on_year"> <span>{{ $t('community_contribution.year_on_year') }}</span> <a-select style="width: 120px; margin-left: 2px;" size="small" :bordered="false" placeholder="请选择年份"> </a-select> </a-radio-button> <a-radio-button value="month_on_month">{{ $t('community_contribution.month_on_month') }}</a-radio-button> </a-radio-group> </span> <span class="tool-style"> <span v-if="detailType === 'contrast'">区间:</span> <span v-else>{{ $t('community_contribution.creation_date') }}:</span> <a-radio-group v-model:value="timeType"> <a-radio-button value="week">{{ $t('global.week') }}</a-radio-button> <a-radio-button value="month">{{ $t('global.month') }}</a-radio-button> <a-radio-button value="year">{{ $t('global.year') }}</a-radio-button> </a-radio-group> </span> <span v-if="detailType === 'contrast'"> <span>基线日期:</span> <a-date-picker v-model:value="timeBase" ></a-date-picker> </span> <span v-else> <a-range-picker v-model:value="timeRange" ></a-range-picker> </span> </span> </a-row> <div v-if="detailType === 'contrast'"> <a-card size="small" title="项目活跃度度量" :head-style="{ backgroundColor: '#f2f7ff'}"> <a-row> <a-col v-for="item in pieData.active_metric" :key="item" :span="8"> <pieChart :id="item.id" :legend-names="item.legend_name" :title="item.title" :value="item.value"></pieChart> </a-col> </a-row> </a-card> <a-card style="margin-top: 10px;" size="small" title="项目影响力度量" :head-style="{ backgroundColor: '#f2f7ff'}"> <a-row> <a-col v-for="item in pieData.impact_measurement" :key="item" :span="8"> <pieChart :id="item.id" :legend-names="item.legend_name" :title="item.title" :value="item.value"></pieChart> </a-col> </a-row> </a-card> </div> <div v-if="detailType === 'trend'"> <a-card v-for="item in lineData" :key="item" size="small" :title="item.title" :head-style="{ backgroundColor: '#f2f7ff'}" style="margin-top: 10px;"> <lineChart :id="item.id" :title="item.title" :value="item.value"></lineChart> </a-card> </div> </a-card> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue'; import i18n from '@/locales'; import pieChart from './components/pieChart.vue'; import lineChart from './components/lineChart.vue'; const detailType = ref<any>('contrast'); const orgType = ref<any>('year_on_year'); const timeType = ref<any>('week'); const timeRange = ref<any>([]); const timeBase = ref<any>(''); const pieRef = ref<any>(null); const LEGEND_NAME = ['本月', '上月']; const pieData = ref<any>({ active_metric: [ { id: 'chart_requests_merged', title: '合入PR数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_issues', title: 'Issue数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_comments', title: '评审意见数', legend_name: LEGEND_NAME, value: [], }, ], impact_measurement: [ { id: 'chart_watch', title: '仓Watch数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_star', title: '仓Star数', legend_name: LEGEND_NAME, value: [], }, { id: 'chart_fork', title: '仓Fork数', legend_name: LEGEND_NAME, value: [], }, ] }); const lineData = ref<any>([ { id: 'chart_pr_trend', title: '合入PR数趋势', value: { xData: [], yData: [], }, }, { id: 'chart_issue_trend', title: 'Issue数趋势', value: { xData: [], yData: [], }, }, { id: 'chart_comment_trend', title: '评审意见数趋势', value: { xData: [], yData: [], }, }, ]); </script> <style lang="less"> .tool-style { margin-right: 20px; } </style>
08-16
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值