mirror of
https://github.com/hariroshan/elm-native-library.git
synced 2024-12-02 23:35:02 +03:00
added docs
This commit is contained in:
hariroshan
parent
147828bfd5
commit
a49e75d96c
File diff suppressed because it is too large
Load Diff
@ -1,35 +1,42 @@
|
||||
module Native.Dialogs exposing
|
||||
( Action
|
||||
, Alert
|
||||
, action
|
||||
, alert
|
||||
, confirm
|
||||
, defaultActionOption
|
||||
, defaultAlertOption
|
||||
, defaultConfirmOption
|
||||
, defaultLoginOption
|
||||
, login
|
||||
, prompt
|
||||
, setAndroidOnlyCancelable
|
||||
, setCancelButtonText
|
||||
, setCapitalizationType
|
||||
, setDefaultText
|
||||
, setInputType
|
||||
, setNeutralButtonText
|
||||
, setOkButtonText
|
||||
, setPassword
|
||||
, setPasswordHint
|
||||
, setTitle
|
||||
, setUserName
|
||||
, setUserNameHint, defaultPromptOption
|
||||
( Action, Alert, Confirm, Login, LoginResult, Prompt, PromptResult
|
||||
, defaultActionOption, defaultAlertOption, defaultConfirmOption, defaultLoginOption, defaultPromptOption
|
||||
, setAndroidOnlyCancelable, setCancelButtonText, setCapitalizationType, setDefaultText, setInputType, setNeutralButtonText, setOkButtonText, setPassword, setPasswordHint, setTitle, setUserName, setUserNameHint
|
||||
, action, alert, confirm, login, prompt
|
||||
)
|
||||
|
||||
{-| Used to show NativeScript dialogs
|
||||
|
||||
|
||||
# Types
|
||||
|
||||
@docs Action, Alert, Confirm, Login, LoginResult, Prompt, PromptResult
|
||||
|
||||
|
||||
# Default Options
|
||||
|
||||
@docs defaultActionOption, defaultAlertOption, defaultConfirmOption, defaultLoginOption, defaultPromptOption
|
||||
|
||||
|
||||
# Setters
|
||||
|
||||
@docs setAndroidOnlyCancelable, setCancelButtonText, setCapitalizationType, setDefaultText, setInputType, setNeutralButtonText, setOkButtonText, setPassword, setPasswordHint, setTitle, setUserName, setUserNameHint
|
||||
|
||||
|
||||
# Dialogs
|
||||
|
||||
@docs action, alert, confirm, login, prompt
|
||||
|
||||
-}
|
||||
|
||||
import Json.Decode as D
|
||||
import Json.Encode as E
|
||||
import Native.Types exposing (CapitalizationType(..), InputType(..), capitalizationToString, inputTypeToString)
|
||||
import TaskPort exposing (FunctionName, QualifiedName, Task, callNS, inNamespace)
|
||||
|
||||
|
||||
{-| Alert dialog options
|
||||
-}
|
||||
type alias Alert =
|
||||
{ title : Maybe String
|
||||
, message : String
|
||||
@ -38,6 +45,8 @@ type alias Alert =
|
||||
}
|
||||
|
||||
|
||||
{-| Action dialog options
|
||||
-}
|
||||
type alias Action =
|
||||
{ title : Maybe String
|
||||
, message : String
|
||||
@ -47,6 +56,8 @@ type alias Action =
|
||||
}
|
||||
|
||||
|
||||
{-| Confirm dialog options
|
||||
-}
|
||||
type alias Confirm =
|
||||
{ title : Maybe String
|
||||
, message : String
|
||||
@ -57,6 +68,8 @@ type alias Confirm =
|
||||
}
|
||||
|
||||
|
||||
{-| Login dialog options
|
||||
-}
|
||||
type alias Login =
|
||||
{ title : Maybe String
|
||||
, message : String
|
||||
@ -70,6 +83,8 @@ type alias Login =
|
||||
}
|
||||
|
||||
|
||||
{-| Result of Login dialog
|
||||
-}
|
||||
type alias LoginResult =
|
||||
{ username : String
|
||||
, password : String
|
||||
@ -77,6 +92,8 @@ type alias LoginResult =
|
||||
}
|
||||
|
||||
|
||||
{-| Prompt dialog options
|
||||
-}
|
||||
type alias Prompt =
|
||||
{ title : Maybe String
|
||||
, message : String
|
||||
@ -89,12 +106,16 @@ type alias Prompt =
|
||||
}
|
||||
|
||||
|
||||
{-| Result of Prompt dialog
|
||||
-}
|
||||
type alias PromptResult =
|
||||
{ text : String
|
||||
, result : Bool
|
||||
}
|
||||
|
||||
|
||||
{-| Default Alert Option
|
||||
-}
|
||||
defaultAlertOption : String -> Alert
|
||||
defaultAlertOption message =
|
||||
{ title = Nothing
|
||||
@ -104,6 +125,8 @@ defaultAlertOption message =
|
||||
}
|
||||
|
||||
|
||||
{-| Default Action Option
|
||||
-}
|
||||
defaultActionOption : String -> List String -> String -> Action
|
||||
defaultActionOption message actions cancelButtonText =
|
||||
{ title = Nothing
|
||||
@ -114,6 +137,8 @@ defaultActionOption message actions cancelButtonText =
|
||||
}
|
||||
|
||||
|
||||
{-| Default Confirm Option
|
||||
-}
|
||||
defaultConfirmOption : String -> Confirm
|
||||
defaultConfirmOption message =
|
||||
{ title = Nothing
|
||||
@ -125,6 +150,8 @@ defaultConfirmOption message =
|
||||
}
|
||||
|
||||
|
||||
{-| Default Login Option
|
||||
-}
|
||||
defaultLoginOption : String -> Login
|
||||
defaultLoginOption message =
|
||||
{ title = Nothing
|
||||
@ -139,6 +166,8 @@ defaultLoginOption message =
|
||||
}
|
||||
|
||||
|
||||
{-| Default Prompt Option
|
||||
-}
|
||||
defaultPromptOption : String -> Prompt
|
||||
defaultPromptOption message =
|
||||
{ title = Nothing
|
||||
@ -152,61 +181,85 @@ defaultPromptOption message =
|
||||
}
|
||||
|
||||
|
||||
{-| Setter for title
|
||||
-}
|
||||
setTitle : String -> { a | title : Maybe String } -> { a | title : Maybe String }
|
||||
setTitle title record =
|
||||
{ record | title = Just title }
|
||||
|
||||
|
||||
{-| Setter for okButtonText
|
||||
-}
|
||||
setOkButtonText : String -> { a | okButtonText : Maybe String } -> { a | okButtonText : Maybe String }
|
||||
setOkButtonText okButtonText record =
|
||||
{ record | okButtonText = Just okButtonText }
|
||||
|
||||
|
||||
{-| Setter for cancelButtonText
|
||||
-}
|
||||
setCancelButtonText : String -> { a | cancelButtonText : Maybe String } -> { a | cancelButtonText : Maybe String }
|
||||
setCancelButtonText cancelButtonText record =
|
||||
{ record | cancelButtonText = Just cancelButtonText }
|
||||
|
||||
|
||||
{-| Setter for neutralButtonText
|
||||
-}
|
||||
setNeutralButtonText : String -> { a | neutralButtonText : Maybe String } -> { a | neutralButtonText : Maybe String }
|
||||
setNeutralButtonText neutralButtonText record =
|
||||
{ record | neutralButtonText = Just neutralButtonText }
|
||||
|
||||
|
||||
{-| Setter for defaultText
|
||||
-}
|
||||
setDefaultText : String -> { a | defaultText : Maybe String } -> { a | defaultText : Maybe String }
|
||||
setDefaultText defaultText record =
|
||||
{ record | defaultText = Just defaultText }
|
||||
|
||||
|
||||
{-| Setter for capitalizationType
|
||||
-}
|
||||
setCapitalizationType : String -> { a | capitalizationType : Maybe String } -> { a | capitalizationType : Maybe String }
|
||||
setCapitalizationType capitalizationType record =
|
||||
{ record | capitalizationType = Just capitalizationType }
|
||||
|
||||
|
||||
{-| Setter for inputType
|
||||
-}
|
||||
setInputType : String -> { a | inputType : Maybe String } -> { a | inputType : Maybe String }
|
||||
setInputType inputType record =
|
||||
{ record | inputType = Just inputType }
|
||||
|
||||
|
||||
{-| Setter for userNameHint
|
||||
-}
|
||||
setUserNameHint : String -> { a | userNameHint : Maybe String } -> { a | userNameHint : Maybe String }
|
||||
setUserNameHint userNameHint record =
|
||||
{ record | userNameHint = Just userNameHint }
|
||||
|
||||
|
||||
{-| Setter for userName
|
||||
-}
|
||||
setUserName : String -> { a | userName : Maybe String } -> { a | userName : Maybe String }
|
||||
setUserName userName record =
|
||||
{ record | userName = Just userName }
|
||||
|
||||
|
||||
{-| Setter for passwordHint
|
||||
-}
|
||||
setPasswordHint : String -> { a | passwordHint : Maybe String } -> { a | passwordHint : Maybe String }
|
||||
setPasswordHint passwordHint record =
|
||||
{ record | passwordHint = Just passwordHint }
|
||||
|
||||
|
||||
{-| Setter for password
|
||||
-}
|
||||
setPassword : String -> { a | password : Maybe String } -> { a | password : Maybe String }
|
||||
setPassword password record =
|
||||
{ record | password = Just password }
|
||||
|
||||
|
||||
{-| Setter for androidOnlyCancelable
|
||||
-}
|
||||
setAndroidOnlyCancelable : Bool -> { a | androidOnlyCancelable : Maybe Bool } -> { a | androidOnlyCancelable : Maybe Bool }
|
||||
setAndroidOnlyCancelable androidOnlyCancelable record =
|
||||
{ record | androidOnlyCancelable = Just androidOnlyCancelable }
|
||||
@ -354,6 +407,8 @@ taskportNamespace =
|
||||
inNamespace "hariroshan/elm-native" "v1"
|
||||
|
||||
|
||||
{-| Creates Alert Dialog Task
|
||||
-}
|
||||
alert : Alert -> Task ()
|
||||
alert =
|
||||
callNS
|
||||
@ -363,6 +418,8 @@ alert =
|
||||
}
|
||||
|
||||
|
||||
{-| Creates Action Dialog Task
|
||||
-}
|
||||
action : Action -> Task String
|
||||
action =
|
||||
callNS
|
||||
@ -372,6 +429,8 @@ action =
|
||||
}
|
||||
|
||||
|
||||
{-| Creates Confirm Dialog Task
|
||||
-}
|
||||
confirm : Confirm -> Task Bool
|
||||
confirm =
|
||||
callNS
|
||||
@ -381,6 +440,8 @@ confirm =
|
||||
}
|
||||
|
||||
|
||||
{-| Creates Login Dialog Task
|
||||
-}
|
||||
login : Login -> Task LoginResult
|
||||
login =
|
||||
callNS
|
||||
@ -390,6 +451,8 @@ login =
|
||||
}
|
||||
|
||||
|
||||
{-| Creates Prompt Dialog Task
|
||||
-}
|
||||
prompt : Prompt -> Task PromptResult
|
||||
prompt =
|
||||
callNS
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
module Native.Event exposing
|
||||
( decodeAttribute
|
||||
, on
|
||||
( on
|
||||
, onBlur
|
||||
, onBusyChange
|
||||
, onDateChange
|
||||
@ -14,54 +13,100 @@ module Native.Event exposing
|
||||
, onTextChange
|
||||
, onUnloaded
|
||||
, onValueChange
|
||||
, decodeAttribute
|
||||
)
|
||||
|
||||
{-| Events listeners for Nativescript UI Elements
|
||||
|
||||
|
||||
# Events
|
||||
|
||||
@docs on
|
||||
@docs onBlur
|
||||
@docs onBusyChange
|
||||
@docs onDateChange
|
||||
@docs onEventWith
|
||||
@docs onFocus
|
||||
@docs onItemTap
|
||||
@docs onLoaded
|
||||
@docs onReturnPress
|
||||
@docs onSelectedIndexChange
|
||||
@docs onTap
|
||||
@docs onTextChange
|
||||
@docs onUnloaded
|
||||
@docs onValueChange
|
||||
|
||||
|
||||
# Decoder
|
||||
|
||||
@docs decodeAttribute
|
||||
|
||||
-}
|
||||
|
||||
import Html exposing (Attribute)
|
||||
import Html.Events as Event
|
||||
import Json.Decode as D
|
||||
import Json.Encode as E
|
||||
|
||||
|
||||
{-| Listens for textChange event
|
||||
-}
|
||||
onTextChange : (String -> msg) -> Attribute msg
|
||||
onTextChange msg =
|
||||
on "textChange" (D.field "value" D.string |> D.map msg)
|
||||
|
||||
|
||||
{-| Listen for tap
|
||||
-}
|
||||
onTap : msg -> Attribute msg
|
||||
onTap msg =
|
||||
on "tap" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for returnPress
|
||||
-}
|
||||
onReturnPress : msg -> Attribute msg
|
||||
onReturnPress msg =
|
||||
on "returnPress" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for focus
|
||||
-}
|
||||
onFocus : msg -> Attribute msg
|
||||
onFocus msg =
|
||||
on "focus" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for blur
|
||||
-}
|
||||
onBlur : msg -> Attribute msg
|
||||
onBlur msg =
|
||||
on "blur" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for loaded
|
||||
-}
|
||||
onLoaded : msg -> Attribute msg
|
||||
onLoaded msg =
|
||||
on "loaded" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for unloaded
|
||||
-}
|
||||
onUnloaded : msg -> Attribute msg
|
||||
onUnloaded msg =
|
||||
on "unloaded" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for busyChange
|
||||
-}
|
||||
onBusyChange : msg -> Attribute msg
|
||||
onBusyChange msg =
|
||||
on "busyChange" (D.succeed msg)
|
||||
|
||||
|
||||
{-| Listen for dateChange
|
||||
-}
|
||||
onDateChange : ({ day : Int, month : Int, year : Int } -> msg) -> Attribute msg
|
||||
onDateChange msg =
|
||||
on "dateChange"
|
||||
@ -72,21 +117,29 @@ onDateChange msg =
|
||||
)
|
||||
|
||||
|
||||
{-| Listens for selectedIndexChange
|
||||
-}
|
||||
onSelectedIndexChange : (Int -> msg) -> Attribute msg
|
||||
onSelectedIndexChange msg =
|
||||
on "selectedIndexChange" (D.field "value" D.int |> D.map msg)
|
||||
|
||||
|
||||
{-| Listen for valueChange
|
||||
-}
|
||||
onValueChange : (Float -> msg) -> Attribute msg
|
||||
onValueChange msg =
|
||||
on "valueChange" (D.field "value" D.float |> D.map msg)
|
||||
|
||||
|
||||
{-| Listen for itemTap in listView
|
||||
-}
|
||||
onItemTap : (Int -> msg) -> Attribute msg
|
||||
onItemTap msg =
|
||||
on "itemTap" (D.field "index" D.int |> D.map msg)
|
||||
|
||||
|
||||
{-| Allows you to build your own events and decoders
|
||||
-}
|
||||
on : String -> D.Decoder msg -> Attribute msg
|
||||
on eventName =
|
||||
Event.on eventName
|
||||
@ -114,27 +167,27 @@ type alias EventOptions =
|
||||
}
|
||||
|
||||
|
||||
{-| Allows you to decode attributes from nativescript object
|
||||
|
||||
{- Usage:
|
||||
Usage:
|
||||
|
||||
listView
|
||||
[ N.items model.encodedItems ]
|
||||
[ button
|
||||
[ N.itemId <| bindingExpression "$value.id"
|
||||
, Event.on "tap" (Event.decodeAttribute "itemId" D.string |> D.map ItemTap)
|
||||
]
|
||||
[]
|
||||
]
|
||||
listViewWithSingleTemplate
|
||||
[ items listViewModel ]
|
||||
[ button
|
||||
[ bindAttributeWithExpression "item-id" "$value.id"
|
||||
, on "tap" (Event.decodeAttribute "itemId" D.string |> D.map ItemTap)
|
||||
]
|
||||
[]
|
||||
]
|
||||
|
||||
-}
|
||||
|
||||
|
||||
decodeAttribute : String -> D.Decoder a -> D.Decoder a
|
||||
decodeAttribute attributeName decoder =
|
||||
D.at [ "object", attributeName ] decoder
|
||||
|
||||
|
||||
{-| Method values are kept under {custom: {[methodName]: value}}
|
||||
We will improve this in future
|
||||
|
||||
For example:
|
||||
|
||||
|
||||
@ -3,12 +3,12 @@ module Native.Frame exposing
|
||||
, TransitionCurve(..)
|
||||
, TransitionName(..)
|
||||
, defaultNavigationOptions
|
||||
, view
|
||||
, goBack
|
||||
, goTo
|
||||
, handleBack
|
||||
, init
|
||||
, mapCurrentPage
|
||||
, view
|
||||
, setAnimated
|
||||
, setBackstackVisible
|
||||
, setClearHistory
|
||||
@ -17,11 +17,47 @@ module Native.Frame exposing
|
||||
, setTransitioniOS
|
||||
)
|
||||
|
||||
{-| Frame handles all the navigations between pages, tracks history and so on.
|
||||
|
||||
Represents the logical View unit that is responsible for navigation within an application. Nested frames are supported, enabling hierarchical navigation scenarios.
|
||||
|
||||
|
||||
# Types
|
||||
|
||||
@docs Model
|
||||
@docs TransitionCurve
|
||||
@docs TransitionName
|
||||
|
||||
|
||||
# Functions
|
||||
|
||||
@docs defaultNavigationOptions
|
||||
@docs goBack
|
||||
@docs goTo
|
||||
@docs handleBack
|
||||
@docs init
|
||||
@docs mapCurrentPage
|
||||
@docs view
|
||||
|
||||
|
||||
# Setter
|
||||
|
||||
@docs setAnimated
|
||||
@docs setBackstackVisible
|
||||
@docs setClearHistory
|
||||
@docs setTransition
|
||||
@docs setTransitionAndroid
|
||||
@docs setTransitioniOS
|
||||
|
||||
-}
|
||||
|
||||
import Html exposing (Attribute, Html)
|
||||
import Html.Attributes exposing (property)
|
||||
import Json.Encode as E
|
||||
|
||||
|
||||
{-| Model that holds the frame related data responsible for page rendering and clearing
|
||||
-}
|
||||
type alias Model page =
|
||||
{ current : page
|
||||
, history : List page
|
||||
@ -30,6 +66,8 @@ type alias Model page =
|
||||
}
|
||||
|
||||
|
||||
{-| Transistion animations supported by frame while navigating to/back page
|
||||
-}
|
||||
type TransitionName
|
||||
= IosOnlyCurlUp
|
||||
| IosOnlyCurlDown
|
||||
@ -43,6 +81,8 @@ type TransitionName
|
||||
| SlideBottom
|
||||
|
||||
|
||||
{-| Animation for transition animation
|
||||
-}
|
||||
type TransitionCurve
|
||||
= Ease
|
||||
| EaseIn
|
||||
@ -53,6 +93,8 @@ type TransitionCurve
|
||||
| CubicBezier ( Float, Float ) ( Float, Float )
|
||||
|
||||
|
||||
{-| Transition options
|
||||
-}
|
||||
type alias Transition =
|
||||
{ name : Maybe TransitionName
|
||||
, duration : Maybe Int
|
||||
@ -143,6 +185,8 @@ encodeTransition transition =
|
||||
|> E.object
|
||||
|
||||
|
||||
{-| NavigationOptions is used to configure navigation while navigating to a page
|
||||
-}
|
||||
type alias NavigationOptions =
|
||||
{ animated : Maybe Bool
|
||||
, transition : Maybe Transition
|
||||
@ -166,6 +210,8 @@ encodeNavigationOptions navOptions =
|
||||
|> E.object
|
||||
|
||||
|
||||
{-| Default navigation options
|
||||
-}
|
||||
defaultNavigationOptions : NavigationOptions
|
||||
defaultNavigationOptions =
|
||||
{ animated = Nothing
|
||||
@ -177,36 +223,50 @@ defaultNavigationOptions =
|
||||
}
|
||||
|
||||
|
||||
{-| Setters for animated
|
||||
-}
|
||||
setAnimated : b -> { a | animated : Maybe b } -> { a | animated : Maybe b }
|
||||
setAnimated val mod =
|
||||
{ mod | animated = Just val }
|
||||
|
||||
|
||||
{-| Setters for transition
|
||||
-}
|
||||
setTransition : b -> { a | transition : Maybe b } -> { a | transition : Maybe b }
|
||||
setTransition val mod =
|
||||
{ mod | transition = Just val }
|
||||
|
||||
|
||||
{-| Setters for transitioniOS
|
||||
-}
|
||||
setTransitioniOS : b -> { a | transitioniOS : Maybe b } -> { a | transitioniOS : Maybe b }
|
||||
setTransitioniOS val mod =
|
||||
{ mod | transitioniOS = Just val }
|
||||
|
||||
|
||||
{-| Setters for transitionAndroid
|
||||
-}
|
||||
setTransitionAndroid : b -> { a | transitionAndroid : Maybe b } -> { a | transitionAndroid : Maybe b }
|
||||
setTransitionAndroid val mod =
|
||||
{ mod | transitionAndroid = Just val }
|
||||
|
||||
|
||||
{-| Setters for backstackVisible
|
||||
-}
|
||||
setBackstackVisible : b -> { a | backstackVisible : Maybe b } -> { a | backstackVisible : Maybe b }
|
||||
setBackstackVisible val mod =
|
||||
{ mod | backstackVisible = Just val }
|
||||
|
||||
|
||||
{-| Setters for clearHistory
|
||||
-}
|
||||
setClearHistory : b -> { a | clearHistory : Maybe b } -> { a | clearHistory : Maybe b }
|
||||
setClearHistory val mod =
|
||||
{ mod | clearHistory = Just val }
|
||||
|
||||
|
||||
{-| Renders the page on to mobile screen
|
||||
-}
|
||||
view : List (Attribute msg) -> (page -> Html msg) -> Model page -> Html msg
|
||||
view attrs getPage frameModel =
|
||||
let
|
||||
@ -227,6 +287,8 @@ view attrs getPage frameModel =
|
||||
history
|
||||
|
||||
|
||||
{-| Map function for mapping current page
|
||||
-}
|
||||
mapCurrentPage : (page -> page) -> Model page -> Model page
|
||||
mapCurrentPage mapFx frameModel =
|
||||
{ frameModel
|
||||
@ -236,6 +298,8 @@ mapCurrentPage mapFx frameModel =
|
||||
}
|
||||
|
||||
|
||||
{-| init function to initalize frame model
|
||||
-}
|
||||
init : page -> Model page
|
||||
init currentPage =
|
||||
{ current = currentPage
|
||||
@ -245,6 +309,8 @@ init currentPage =
|
||||
}
|
||||
|
||||
|
||||
{-| Used to sync pages and history when nativescript navigates to different page.
|
||||
-}
|
||||
handleBack : Bool -> Model page -> Model page
|
||||
handleBack isBackNavigation model =
|
||||
if not isBackNavigation then
|
||||
@ -263,11 +329,15 @@ handleBack isBackNavigation model =
|
||||
}
|
||||
|
||||
|
||||
{-| Allows frame to go back to previous page
|
||||
-}
|
||||
goBack : Model page -> Model page
|
||||
goBack model =
|
||||
{ model | popStack = True }
|
||||
|
||||
|
||||
{-| Allows frame to move to next page
|
||||
-}
|
||||
goTo : page -> Maybe NavigationOptions -> Model page -> Model page
|
||||
goTo page maybeNavigationOptions model =
|
||||
{ model
|
||||
|
||||
@ -5,10 +5,26 @@ module Native.Layout exposing
|
||||
, gridLayout
|
||||
, rootLayout
|
||||
, stackLayout
|
||||
, tabView
|
||||
, wrapLayout
|
||||
, tabView
|
||||
)
|
||||
|
||||
{-| Layout is used to organize the UI elements in the mobile screen [refer.](https://docs.nativescript.org/ui-and-styling.html#layout-containers)
|
||||
|
||||
|
||||
# Layouts
|
||||
|
||||
@docs absoluteLayout
|
||||
@docs dockLayout
|
||||
@docs flexboxLayout
|
||||
@docs gridLayout
|
||||
@docs rootLayout
|
||||
@docs stackLayout
|
||||
@docs wrapLayout
|
||||
@docs tabView
|
||||
|
||||
-}
|
||||
|
||||
import Html exposing (Attribute, Html)
|
||||
|
||||
|
||||
@ -17,41 +33,228 @@ buildLayout nodeName attrs children =
|
||||
Html.node nodeName attrs children
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#absolutelayout)
|
||||
|
||||
The AbsoluteLayout container is the simplest layout container in NativeScript.
|
||||
|
||||
AbsoluteLayout has the following behavior:
|
||||
|
||||
- Uses a pair of absolute left/top coordinates to position its children.
|
||||
- Doesn't enforce any layout constraints on its children.
|
||||
- Doesn't resize its children at runtime when its size changes.
|
||||
|
||||
Example
|
||||
|
||||
absoluteLayout [ backgroundColor "#3c495e" ]
|
||||
[ label
|
||||
[ text "10,10"
|
||||
, left "10"
|
||||
, top "10"
|
||||
, width "100"
|
||||
, height "100"
|
||||
, backgroundColor "#43b883"
|
||||
]
|
||||
[]
|
||||
, label
|
||||
[ text "120,10"
|
||||
, left "120"
|
||||
, top "10"
|
||||
, width "100"
|
||||
, height "100"
|
||||
, backgroundColor "#43b883"
|
||||
]
|
||||
[]
|
||||
]
|
||||
|
||||
-}
|
||||
absoluteLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
absoluteLayout =
|
||||
buildLayout "ns-absolute-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#docklayout)
|
||||
|
||||
DockLayout is a layout container that lets you dock child elements to the sides or the center of the layout.
|
||||
|
||||
DockLayout has the following behavior:
|
||||
|
||||
- Uses the dock property to dock its children to the left, right, top, bottom or center of the layout.
|
||||
- To dock a child element to the center, it must be the last child of the container and you must set the stretchLastChild property of the parent to true.
|
||||
- Enforces layout constraints to its children.
|
||||
- Resizes its children at runtime when its size changes.
|
||||
|
||||
Example
|
||||
|
||||
dockLayout
|
||||
[ stretchLastChild "false", backgroundColor "#3c495e" ]
|
||||
[ label [ text "left", dock "left", width "40", backgroundColor "#43b883" ] []
|
||||
, label [ text "top", dock "top", width "40", backgroundColor "#289062" ] []
|
||||
, label [ text "right", dock "right", width "40", backgroundColor "#43b883" ] []
|
||||
, label [ text "bottom", dock "bottom", width "40", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-}
|
||||
dockLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
dockLayout =
|
||||
buildLayout "ns-dock-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#gridlayout)
|
||||
|
||||
GridLayout is a layout container that lets you arrange its child elements in a table-like manner.
|
||||
|
||||
The grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other.
|
||||
|
||||
By default, GridLayout has one column and one row. You can add columns and rows by configuring the columns and the rows properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma.
|
||||
|
||||
You can set a fixed size for column width and row height or you can create them in a responsive manner:
|
||||
|
||||
- An absolute number: Indicates a fixed size.
|
||||
- auto: Makes the column as wide as its widest child or makes the row as tall as its tallest child.
|
||||
- `*`: Takes as much space as available after filling all auto and fixed size columns or rows.
|
||||
|
||||
Example
|
||||
|
||||
-- Grid layout with fixed sizing
|
||||
gridLayout [ columns "115, 115", rows "115, 115" ]
|
||||
[ label [ text "0,0", row "0", col "0", backgroundColor "#43b883" ] []
|
||||
, label [ text "0,1", row "0", col "1", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "1,0", row "1", col "0", backgroundColor "#289062" ] []
|
||||
, label [ text "1,1", row "1", col "1", backgroundColor "#43b883" ] []
|
||||
]
|
||||
|
||||
-- Grid layout with star sizing
|
||||
gridLayout [ columns "*, 2*", rows "2*, 3*", backgroundColor "#3c495e" ]
|
||||
[ label [ text "0,0", row "0", col "0", backgroundColor "#43b883" ] []
|
||||
, label [ text "0,1", row "0", col "1", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "1,0", row "1", col "0", backgroundColor "#289062" ] []
|
||||
, label [ text "1,1", row "1", col "1", backgroundColor "#43b883" ] []
|
||||
]
|
||||
|
||||
-- Grid layout with fixed and auto sizing
|
||||
gridLayout [ columns "80, auto", rows "80, 80", backgroundColor "#3c495e" ]
|
||||
[ label [ text "0,0", row "0", col "0", backgroundColor "#43b883" ] []
|
||||
, label [ text "0,1", row "0", col "1", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "1,0", row "1", col "0", backgroundColor "#289062" ] []
|
||||
, label [ text "1,1", row "1", col "1", backgroundColor "#43b883" ] []
|
||||
]
|
||||
|
||||
-}
|
||||
gridLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
gridLayout =
|
||||
buildLayout "ns-grid-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#stacklayout)
|
||||
|
||||
StackLayout is a layout container that lets you stack the child elements vertically (default) or horizontally.
|
||||
|
||||
Important:
|
||||
|
||||
Try not to nest too many StackLayout in your markup. If you find yourself nesting a lot of StackLayout you will likely get better performance by switching to a GridLayout or FlexboxLayout.
|
||||
See [Layout Nesting](https://docs.nativescript.org/common-pitfalls.html#layout-nesting) for more information.
|
||||
|
||||
Example
|
||||
|
||||
stackLayout [ backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", height "70", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", height "70", backgroundColor "#289062" ] []
|
||||
, label [ text "third", height "70", backgroundColor "#1c6b48" ] []
|
||||
]
|
||||
|
||||
-- Horizontal stacking
|
||||
stackLayout [ orientation "horizontal", backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", height "70", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", height "70", backgroundColor "#289062" ] []
|
||||
, label [ text "third", height "70", backgroundColor "#1c6b48" ] []
|
||||
]
|
||||
|
||||
-}
|
||||
stackLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
stackLayout =
|
||||
buildLayout "ns-stack-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#rootlayout)
|
||||
|
||||
RootLayout is a layout container designed to be used as the primary root layout container for your app with a built in api to easily control dynamic view layers. It extends a GridLayout so has all the features of a grid but enhanced with additional apis.
|
||||
|
||||
-}
|
||||
rootLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
rootLayout =
|
||||
buildLayout "ns-root-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#wraplayout)
|
||||
|
||||
WrapLayout is a layout container that lets you position items in rows or columns, based on the orientation property. When the space is filled, the container automatically wraps items onto a new row or column.
|
||||
|
||||
wrapLayout []
|
||||
[ label [ text "first", width "30%", height "30%", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", width "30%", height "30%", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "third", width "30%", height "30%", backgroundColor "#289062" ] []
|
||||
, label [ text "fourth", width "30%", height "30%", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-}
|
||||
wrapLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
wrapLayout =
|
||||
buildLayout "ns-wrap-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#flexboxlayout)
|
||||
|
||||
FlexboxLayout is a layout container that provides a non-exact implementation of the CSS Flexbox layout. This layout lets you arrange child components both horizontally and vertically.
|
||||
|
||||
-- Default flex layout
|
||||
flexboxLayout [ backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", width "70", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", width "70", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "third", width "70", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-- Column flex layout
|
||||
flexboxLayout [ flexDirection "column", backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", width "70", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", width "70", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "third", width "70", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-- Row flex layout with items aligned to flex-start
|
||||
flexboxLayout [ alignItems "flex-start", backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", width "70", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", width "70", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "third", width "70", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-- Row flex layout with custom order
|
||||
flexboxLayout [ alignItems "flex-start", backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", order "2", width "70", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", order "3", width "70", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "third", order "1", width "70", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-- Row flex layout with wrapping
|
||||
flexboxLayout [ flexWrap "wrap", backgroundColor "#3c495e" ]
|
||||
[ label [ text "first", width "30%", backgroundColor "#43b883" ] []
|
||||
, label [ text "second", width "30%", backgroundColor "#1c6b48" ] []
|
||||
, label [ text "third", width "30%", backgroundColor "#289062" ] []
|
||||
, label [ text "fourth", width "30%", backgroundColor "#289062" ] []
|
||||
]
|
||||
|
||||
-}
|
||||
flexboxLayout : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
flexboxLayout =
|
||||
buildLayout "ns-flexbox-layout"
|
||||
|
||||
|
||||
{-| [Refer](https://docs.nativescript.org/ui-and-styling.html#tabview)
|
||||
|
||||
TabView is a navigation component that shows content grouped into tabs and lets users switch between tabs.
|
||||
|
||||
Currently, TabViewItem expects a single child element. In most cases, you might want to wrap your content in a layout.
|
||||
|
||||
-}
|
||||
tabView : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
tabView =
|
||||
buildLayout "ns-tab-view"
|
||||
|
||||
@ -4,12 +4,33 @@ module Native.Page exposing
|
||||
, pageWithActionBar
|
||||
)
|
||||
|
||||
{-| Page is a UI component that represents an application screen. NativeScript apps typically consist of one or more <Page> that wrap content such as an <ActionBar> and other UI widgets.
|
||||
[refer](https://docs.nativescript.org/ui-and-styling.html#page)
|
||||
|
||||
|
||||
# Functions
|
||||
|
||||
@docs modal
|
||||
@docs page
|
||||
@docs pageWithActionBar
|
||||
|
||||
-}
|
||||
|
||||
import Html exposing (Attribute, Html)
|
||||
import Json.Decode as D
|
||||
import Native.Attributes as N
|
||||
import Native.Event as Event
|
||||
|
||||
|
||||
{-| Page takes onBackNavigation which should be used to SyncFrame
|
||||
|
||||
Example
|
||||
SyncFrame bool ->
|
||||
( { model | rootFrame = Frame.handleBack bool model.rootFrame }, Cmd.none )
|
||||
|
||||
Page takes only one child
|
||||
|
||||
-}
|
||||
page : (Bool -> msg) -> List (Attribute msg) -> Html msg -> Html msg
|
||||
page onBackNavigation attrs layout =
|
||||
Html.node "ns-page"
|
||||
@ -17,6 +38,8 @@ page onBackNavigation attrs layout =
|
||||
[ layout ]
|
||||
|
||||
|
||||
{-| Similar to page but actionBar support
|
||||
-}
|
||||
pageWithActionBar : (Bool -> msg) -> List (Attribute msg) -> Html msg -> Html msg -> Html msg
|
||||
pageWithActionBar onBackNavigation attrs actionBar layout =
|
||||
Html.node "ns-page"
|
||||
@ -29,6 +52,8 @@ makeOnBackNavigation msg =
|
||||
Event.on "navigatedTo" (D.field "isBackNavigation" D.bool |> D.map msg)
|
||||
|
||||
|
||||
{-| Used to make modal page
|
||||
-}
|
||||
modal : (Bool -> msg) -> Bool -> Html msg -> Html msg
|
||||
modal syncFrame isFullScreen child =
|
||||
page syncFrame
|
||||
|
||||
@ -1,11 +1,25 @@
|
||||
module Native.Types exposing
|
||||
( CapitalizationType(..)
|
||||
, InputType(..)
|
||||
, capitalizationToString
|
||||
, inputTypeToString
|
||||
( CapitalizationType(..), InputType(..)
|
||||
, capitalizationToString, inputTypeToString
|
||||
)
|
||||
|
||||
{-| Type variants used in nativescript.
|
||||
|
||||
|
||||
# Types
|
||||
|
||||
@docs CapitalizationType, InputType
|
||||
|
||||
|
||||
# Functions
|
||||
|
||||
@docs capitalizationToString, inputTypeToString
|
||||
|
||||
-}
|
||||
|
||||
|
||||
{-| Used to Capitalize Text
|
||||
-}
|
||||
type CapitalizationType
|
||||
= Sentences
|
||||
| None
|
||||
@ -13,6 +27,8 @@ type CapitalizationType
|
||||
| Words
|
||||
|
||||
|
||||
{-| Used for InputType
|
||||
-}
|
||||
type InputType
|
||||
= Text
|
||||
| Password
|
||||
@ -22,6 +38,8 @@ type InputType
|
||||
| Phone
|
||||
|
||||
|
||||
{-| Converts InputType to string
|
||||
-}
|
||||
inputTypeToString : InputType -> String
|
||||
inputTypeToString input =
|
||||
case input of
|
||||
@ -44,6 +62,8 @@ inputTypeToString input =
|
||||
"phone"
|
||||
|
||||
|
||||
{-| Converts CapitalizationType to string
|
||||
-}
|
||||
capitalizationToString : CapitalizationType -> String
|
||||
capitalizationToString cap =
|
||||
case cap of
|
||||
|
||||
Loading…
Reference in New Issue
Block a user