CODEWITHSUNDEEP
nativescript
Maxim Shoustin
Maxim Shoustin

Reputation: 77904

What is a proper way to create component in Nativescript?

What is right way to create custom template in Nativescript?

For example I have XML structure like:

     <FlexboxLayout flexDirection="column" alignItems = "stretch">
        <Border  borderWidth="1" borderColor="#000000">
        <FlexboxLayout height="60">
            <Button cssClass="sdk-button" col="0" text="initSDK" tap="{{initSdk}}" flexGrow="1"/>

            <StackLayout orientation="horizontal" class="data-wrapper" flexGrow="3" paddingLeft="20">
                <Label text="{{ initSdkResponse }}" class="data_wrapper-label" textWrap="true"/>
            </StackLayout>
        </FlexboxLayout>
        </Border>
    </FlexboxLayout>

I want to create component with above mentioned structure, named MyItem and use it as follow:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <StackLayout orientation="vertical">
      <MyItem buttonName="click1"
              buttonAction="onClick1()"
              labelText="xxxxxxx1"
      ></MyItem>

      <MyItem buttonName="click2"
              buttonAction="onClick2()"
              labelText="xxxxxxx2"
      ></MyItem>
    </StackLayout>
</Page>

Upvotes: 0

Views: 229

Answers (1)

Dammy joel
Dammy joel

Reputation: 562

I think you will find these resources helpful:

https://moduscreate.com/custom-components-in-nativescript/

http://blog.bradleygore.com/2016/03/12/custom-nativescript-components/

http://docs.nativescript.org/ui/basics#custom-components

Upvotes: 2

Related Questions