Tcomb-form-native: Add examples of stylesheets customisation

[gcanti]

[flizzer]

Thanks so much for the good work being done here. It's really making my form validation life easier. However, I've read the documentation about how to use local stylesheets, and I'm still having trouble seeing how to group inputs into say a fieldset and lay them out horizontally (i.e: First Name...Middle Initial...Last Name fields on one line). I know I can override the stylesheet, but is there a way to add a class name to the "firstname" field using an option or something? Lastly, am I correct in understanding that Android support is coming and not already supported? If so, do you know when this might be released? Thanks again for your hard work!

[gcanti]

Hi @flizzer, I'm writing the draft of a little tutorial on stylesheets.

https://github.com/gcanti/tcomb-form-native/blob/tutorial/docs/STYLESHEETS.md

Disclaimer. I'm not a native speaker so I'd love to hear your feedback (any review, suggestion or request is appreciated). I apologize for the terseness of the docs but writing good documentation is extremely time consuming and my ugly english doesn't help :)

[alvaromb]

Hi @flizzer!

First of all, tcomb-form-native is now supported in Android, but not _fully supported_. For instance, the checkbox component uses SwitchIOS, not Switch. You'll have to wait for 0.4 to have full Android support. Expect that to be released this or next week.

For what you are trying to do, you can either try to customize the stylesheet, as @gcanti stated, or you could build a custom factory.

[flizzer]

@alvaromb Thanks for the clarification! @gcanti I think this stylesheet guide is quite good! It helped me get the flex box behavior working globally, but what I really need to do is only use that style for certain elements. I want to group certain elements together horizontally but not all of them. I tried using the "stylesheet" property for a couple of fields in the "options" object (see screenshots below please). But the style isn't being honored. Could someone show me an example of how to do this? Perhaps a custom factory is indeed what I need to do just overriding the style? Ciao and thanks for your help.

[gcanti]

Ok @flizzer, then I think you need the second level of customization: templates
Try this:

// I want the a field alone
// and the b and c fields grouped horizontally
const Type = t.struct({
  a: t.String,
  b: t.String,
  c: t.String
});

function template(locals) {
  // in locals.inputs you find all the rendered fields
  return (
    <View>
      {locals.inputs.a}
      <View style={{flexDirection: 'row'}}>
        <View style={{flex: 1}}>
          {locals.inputs.b}
        </View>
        <View style={{flex: 1}}>
          {locals.inputs.c}
        </View>
      </View>
    </View>
  );
}

var options = {
  // override the default template for the main struct
  template: template
};

Output

[flizzer]

Thanks very much for the quick response! I'll try this out tonight. Looks like exactly what I need! Thanks again!

Brian

Sent from my iPhone

On Jan 30, 2016, at 11:47 AM, Giulio Canti [email protected] wrote:

Ok @flizzer, then I think you need the second level of customization: templates
Try this:

// I want the a field alone
// and the b and c fields grouped horizontally
const Type = t.struct({
a: t.String,
b: t.String,
c: t.String
});

function template(locals) {
// in locals.inputs you find all the rendered fields
return (

{locals.inputs.a}
{locals.inputs.b}

{locals.inputs.c}



);
}

var options = {
// override the default template for the main struct
template: template
};
Output

—
Reply to this email directly or view it on GitHub.

[gcanti]

Closing as per 2da255a42fe3e6cb144a3f5bd1c114c553012d64

[adjieindrawan]

@gcanti thanks for your help! but, can u help me? how to add label in your explanation above.