ui-rn 1.0.11 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +147 -20
- package/package.json +1 -1
- package/src/Text/Props.ts +4 -6
- package/test.tsx +25 -0
package/README.md
CHANGED
|
@@ -4,27 +4,154 @@
|
|
|
4
4
|
npm install ui-rn
|
|
5
5
|
```
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Exanmple :
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
10
|
import {Block, Text, Icon, Touch, Layout, LoadingView} from 'ui-rn';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</
|
|
11
|
+
import React from 'react';
|
|
12
|
+
export default function test() {
|
|
13
|
+
return (
|
|
14
|
+
<Layout>
|
|
15
|
+
<Block
|
|
16
|
+
mar-5
|
|
17
|
+
pad-5
|
|
18
|
+
red
|
|
19
|
+
background={['red', 'blue']}
|
|
20
|
+
positionOption={{top: 10, left: 5}}
|
|
21
|
+
alignCenter
|
|
22
|
+
borderCircle
|
|
23
|
+
mid
|
|
24
|
+
row
|
|
25
|
+
width-150
|
|
26
|
+
height-300>
|
|
27
|
+
<Text size-14 red toUpperCase italic bold>
|
|
28
|
+
Hello
|
|
29
|
+
</Text>
|
|
30
|
+
<Icon name="home" size-45 type="MaterialIcons" />
|
|
31
|
+
</Block>
|
|
32
|
+
</Layout>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
30
35
|
```
|
|
36
|
+
|
|
37
|
+
### Block Props:
|
|
38
|
+
|
|
39
|
+
| Prop | Description |
|
|
40
|
+
| ---------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
41
|
+
| borderUpRadius | number |
|
|
42
|
+
| borderDownRadius | number |
|
|
43
|
+
| alignItems | FlexStyle['alignItems'] |
|
|
44
|
+
| alignSelf | FlexStyle['alignSelf'] |
|
|
45
|
+
| justifyContent | FlexStyle['justifyContent'] |
|
|
46
|
+
| borderStyle | ViewStyle['borderStyle'] |
|
|
47
|
+
| opacity | ViewStyle['opacity'] |
|
|
48
|
+
| overflow | ViewStyle['overflow'] |
|
|
49
|
+
| w100 | boolean |
|
|
50
|
+
| h100 | boolean |
|
|
51
|
+
| mid | boolean |
|
|
52
|
+
| row | boolean |
|
|
53
|
+
| alignCenter | boolean |
|
|
54
|
+
| justifyCenter | boolean |
|
|
55
|
+
| borderCircle | boolean |
|
|
56
|
+
| centerBetween | boolean |
|
|
57
|
+
| justifyBetween | boolean |
|
|
58
|
+
| overHidden | boolean |
|
|
59
|
+
| square | number |
|
|
60
|
+
| width100 | boolean |
|
|
61
|
+
| height100 | boolean |
|
|
62
|
+
| background | Array <string> , string |
|
|
63
|
+
| gradient | 'vertical', 'horizontal' |
|
|
64
|
+
| flexOne | boolean |
|
|
65
|
+
| shadowColor | string, boolean |
|
|
66
|
+
| borderOption | { top?: number, left?: number, right?: number, bottom?: number, color?: string } |
|
|
67
|
+
| positionOption | { top?: number, left?: number, right?: number, bottom?: number } |
|
|
68
|
+
| paddingOption | { all?: number, top?: number, left?: number, right?: number, bottom?: number } |
|
|
69
|
+
| paddingFlex | { vertical?: number, horizontal?: number } |
|
|
70
|
+
| marginFlex | { vertical?: number, horizontal?: number } |
|
|
71
|
+
| marginOption | { all?: number, top?: number, left?: number, right?: number, bottom?: number } |
|
|
72
|
+
| shadowOption | { color?: string, width?: number, height?: number, opacity?: number, radius?: number, elevation?: number } |
|
|
73
|
+
| widthScreen | boolean |
|
|
74
|
+
| heightScreen | boolean |
|
|
75
|
+
|
|
76
|
+
### Block style props:
|
|
77
|
+
|
|
78
|
+
| Prop Style | ViewStyle |
|
|
79
|
+
| ---------- | ----------------- |
|
|
80
|
+
| bg | backgroundColor |
|
|
81
|
+
| background | backgroundColor |
|
|
82
|
+
| w | width |
|
|
83
|
+
| width | width |
|
|
84
|
+
| minW | minWidth |
|
|
85
|
+
| maxW | maxWidth |
|
|
86
|
+
| h | height |
|
|
87
|
+
| height | height |
|
|
88
|
+
| minH | minHeight |
|
|
89
|
+
| maxH | maxHeight |
|
|
90
|
+
| pad | padding |
|
|
91
|
+
| padH | paddingHorizontal |
|
|
92
|
+
| padV | paddingVertical |
|
|
93
|
+
| padL | paddingLeft |
|
|
94
|
+
| padT | paddingTop |
|
|
95
|
+
| padR | paddingRight |
|
|
96
|
+
| padB | paddingBottom |
|
|
97
|
+
| mar | margin |
|
|
98
|
+
| marH | marginHorizontal |
|
|
99
|
+
| marV | marginVertical |
|
|
100
|
+
| marL | marginLeft |
|
|
101
|
+
| marT | marginTop |
|
|
102
|
+
| marR | marginRight |
|
|
103
|
+
| marB | marginBottom |
|
|
104
|
+
| border | borderWidth |
|
|
105
|
+
| borderW | borderWidth |
|
|
106
|
+
| borderR | borderRadius |
|
|
107
|
+
| borderC | borderColor |
|
|
108
|
+
| borderLW | borderLeftWidth |
|
|
109
|
+
| borderTW | borderTopWidth |
|
|
110
|
+
| borderRW | borderRightWidth |
|
|
111
|
+
| borderBW | borderBottomWidth |
|
|
112
|
+
| flex | flex |
|
|
113
|
+
| zIndex | zIndex |
|
|
114
|
+
| left | left |
|
|
115
|
+
| top | top |
|
|
116
|
+
| bottom | bottom |
|
|
117
|
+
| right | right |
|
|
118
|
+
| opacity | opacity |
|
|
119
|
+
|
|
120
|
+
### Text :
|
|
121
|
+
|
|
122
|
+
| Prop Style | ViewStyle |
|
|
123
|
+
| ----------- | --------------------------------- |
|
|
124
|
+
| bold | boolean, TextStyle['fontWeight'] |
|
|
125
|
+
| center | boolean |
|
|
126
|
+
| italic | boolean |
|
|
127
|
+
| underline | boolean |
|
|
128
|
+
| color | string |
|
|
129
|
+
| toUpperCase | boolean |
|
|
130
|
+
| toLowerCase | boolean |
|
|
131
|
+
| background | string |
|
|
132
|
+
|
|
133
|
+
### Icon :
|
|
134
|
+
|
|
135
|
+
| Prop Style | ViewStyle |
|
|
136
|
+
| ---------- | --------- |
|
|
137
|
+
| center | boolean |
|
|
138
|
+
| size | number |
|
|
139
|
+
| color | string |
|
|
140
|
+
| name | string |
|
|
141
|
+
| type | string |
|
|
142
|
+
|
|
143
|
+
## Type
|
|
144
|
+
| Type |
|
|
145
|
+
| ---------- |
|
|
146
|
+
|Ionicons|
|
|
147
|
+
|AntDesign|
|
|
148
|
+
|Entypo|
|
|
149
|
+
|EvilIcons|
|
|
150
|
+
|MaterialIcons|
|
|
151
|
+
|MaterialCommunityIcons|
|
|
152
|
+
|FontAwesome|
|
|
153
|
+
|FontAwesome5|
|
|
154
|
+
|SimpleLineIcons|
|
|
155
|
+
|Feather|
|
|
156
|
+
|Octicons|
|
|
157
|
+
|Fontisto|
|
package/package.json
CHANGED
package/src/Text/Props.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { TextProps, TextStyle } from 'react-native'
|
|
3
|
-
import {
|
|
3
|
+
import { ILanguage } from '../config'
|
|
4
4
|
import { MakeProp } from './makeStyle'
|
|
5
5
|
interface PropsParent {
|
|
6
6
|
children?: React.ReactNode
|
|
@@ -8,11 +8,10 @@ interface PropsParent {
|
|
|
8
8
|
center?: boolean
|
|
9
9
|
italic?: boolean
|
|
10
10
|
underline?: boolean
|
|
11
|
-
|
|
12
|
-
color?: string | Array<IColor>
|
|
11
|
+
color?: string
|
|
13
12
|
toUpperCase?: boolean
|
|
14
13
|
toLowerCase?: boolean
|
|
15
|
-
background?: string
|
|
14
|
+
background?: string
|
|
16
15
|
}
|
|
17
16
|
//@ts-ignore
|
|
18
17
|
export interface Props extends TextProps, PropsParent, MakeProp {
|
|
@@ -28,5 +27,4 @@ export interface Props extends TextProps, PropsParent, MakeProp {
|
|
|
28
27
|
black?: boolean
|
|
29
28
|
/** Lang in file VI/EN */
|
|
30
29
|
lang?: ILanguage
|
|
31
|
-
}
|
|
32
|
-
type size = 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25
|
|
30
|
+
}
|
package/test.tsx
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Block, Text, Icon, Touch, Layout, LoadingView } from 'ui-rn';
|
|
2
|
+
import React from 'react'
|
|
3
|
+
export default function test() {
|
|
4
|
+
return (
|
|
5
|
+
<Layout>
|
|
6
|
+
<Block
|
|
7
|
+
mar-5
|
|
8
|
+
pad-5
|
|
9
|
+
red
|
|
10
|
+
background={['red', 'blue']}
|
|
11
|
+
positionOption={{ top: 10, left: 5 }}
|
|
12
|
+
alignCenter
|
|
13
|
+
borderCircle
|
|
14
|
+
mid
|
|
15
|
+
row
|
|
16
|
+
width-150
|
|
17
|
+
height-300>
|
|
18
|
+
<Text size-14 red toUpperCase italic bold>
|
|
19
|
+
Hello
|
|
20
|
+
</Text>
|
|
21
|
+
<Icon name="home" size-45 type="MaterialIcons" />
|
|
22
|
+
</Block>
|
|
23
|
+
</Layout>
|
|
24
|
+
)
|
|
25
|
+
}
|