Come si rimuove il bordo di un componente Flex 4 TextArea (spark a tema halo)

Question

Con Flex 3 SDK era sufficiente impostare lo stile borderThickness su 0 o borderStyle su none. Con Flex 4 SDK e il tema Spark, questo non ha alcun effetto.

Answer 1

Devi impostare borderSkin su null

<mx:TextArea borderSkin={null} />

Answer 2

Prova qualcosa del tipo:

borderVisible="false"

Answer 3

Se vuoi rimuovere il bordo da scintilla TextArea qui ci sono alcuni modi per farlo: Per fare in modo che tutte le scintille TextAreas non abbiano bordi, puoi farlo:

s|TextArea {
  borderVisible : false;
}

Puoi anche creare uno stile semplice e applicarli solo a Spark TextAreas specifico in questo modo:

.noBorder {
  borderVisible : false;
}
...
<s:TextArea styleName="noBorder"/>

Puoi disattivarlo tramite la creazione completa in questo modo:

<s:Application ...
  creationComplete="onCreationComplete()"/>
...
private function onCreationComplete() : void {
  mySparkTextArea.setStyle('borderVisible', false);
}
...
<s:TextArea id="mySparkTextArea"/>
</s:Application>

Infine, puoi creare uno skin, su suggerimento di DrMaxmAd, in questo modo:

...
<!-- border/fill --> 
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>            
    </s:stroke>
    <s:fill>
        <s:SolidColor color="#FFFFFF"/>
    </s:fill>
</s:Rect>
...

Answer 4

Non mi sono ancora dilettato in Flash Builder 4, ma so che in Flex 3 puoi modificare cose del genere (quando non è possibile in un altro modo):

var tb:TextInput = new TextInput();
tb.getChildAt(0).setStyle(...);

Potresti provare, devi solo trovare l'elemento figlio corretto di solito.

MODIFICA : Ecco la tua risposta

Answer 5

Jeol la tua risposta funziona per i componenti MX, per il componente textarea flex 4 spark impostato borderVisible = " false " e nel codice lblMessage.setStyle (" contentBackgroundAlpha " ;, 0);

Inoltre, se stai facendo questo, probabilmente vuoi che l'hacking riduca automaticamente la dimensione al suo contenuto ... set heightInLines = " {NaN} "

<s:TextArea borderVisible="false" focusEnabled="false" width="100%" id="lblMessage" heightInLines="{NaN}"  editable="false" selectable="true" lineBreak="toFit" verticalScrollPolicy="off" horizontalScrollPolicy="off" />

protected function OnCreationComplete(objEvent:Event):void{
   lblMessage.setStyle("contentBackgroundAlpha", 0);
 }

... e grazie per RobotLegs, è fantastico!

Answer 6

bene ho provato il codice sopra ma non funziona per me Flex Hero SDK 4.5, quindi quello che ho fatto ho selezionato textArea e creato una nuova skin personalizzata e ho cambiato il bordo alfa su 0.

<!-- border/fill --> 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="#5C5C5C" weight="1" alpha="0"/>            
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

semplice e dolce

Answer 7

In Flex 3: il bordo per il componente TextArea può essere controllato usando questi due attributi / proprietà:

&
• borderSkin = quot; {null} quot &;
• focusAlpha = quot &; 0 quot &;

Focus alpha ti assicura di non far apparire il bordo anche quando TextArea è selezionato.