Search code examples
iosnativescriptangular2-nativescriptnativescript-angularnativescript-plugin

How to edit NativeScript-Angular RadDataForm UIStepper on iOS?


In a NativeScript-Angular app, I’m trying to style a RadDataForms TKPropertyEditor. For the Stepper Editor on iOS I want do increase the distance between the controls and the displayed value, but I can't find a way to access them.

I'm using nativescript-ui-dataform: 4.0.0.

<TKEntityProperty tkDataFormProperty name="grade" 
    displayName="Bewertung (1 – 10)" index="1">
  <TKPropertyEditor tkEntityPropertyEditor type="Stepper">
    <TKPropertyEditorParams tKEditorParams minimum="1" maximum="10" 
      step="1"></TKPropertyEditorParams>
    <TKPropertyEditorStyle tkPropertyEditorStyle valuePosition="Left"> 
    </TKPropertyEditorStyle>
  </TKPropertyEditor>
</TKEntityProperty>

Solution

  • Refer the advanced styling examples here, you may directly modify the native object to style your element.

     public editorSetupStepperIOS(editor) {
        editor.valueLabel.textColor = colorDark.ios;
    
        const coreEditor = <UIStepper>editor.editor;
        coreEditor.tintColor = colorLight.ios;
    
        for (let i = 0; i < coreEditor.subviews.count; i++) {
            if (coreEditor.subviews[i] instanceof UIButton) {
                (<UIButton>coreEditor.subviews[i]).imageView.tintColor = colorDark.ios;
            }
        }
        const editorView = editor.editorCore;
        editorView.labelAlignment = TKGridLayoutAlignment.Left;
    }