Skip to content

Update style.md #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 24, 2023
Merged

Update style.md #29

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 79 additions & 78 deletions docs/style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ let styles = {
"container": viewStyle(
~maxHeight=600.->dp,
~width=80.->pct,
~justifyContent=#flexStart,
~justifyContent=#"flex-start",
~alignItems=#center,
~margin=auto,
(),
Expand Down Expand Up @@ -163,12 +163,12 @@ This function accepts all React Native styles below:

Accepts one of the following values:

- `` `flexStart `` (default)
- `` `flexEnd ``
- `` `center ``
- `` `stretch ``
- `` `spaceAround ``
- `` `spaceBetween ``
- `` #"flex-start" `` (default)
- `` #"flex-end" ``
- `` #center ``
- `` #stretch ``
- `` #"space-around" ``
- `` #"space-between" ``

Controls how rows align in the cross direction, overriding the `alignContent` of
the parent.
Expand All @@ -180,11 +180,11 @@ the parent.

Accepts one of the following values:

- `` `flexStart ``
- `` `flexEnd ``
- `` `center ``
- `` `stretch `` (default)
- `` `baseline ``
- `` #"flex-start" ``
- `` #"flex-end" ``
- `` #center ``
- `` #stretch `` (default)
- `` #baseline ``

Aligns children in the cross direction. For example, if children are flowing
vertically, `alignItems` controls how they align horizontally.
Expand All @@ -196,12 +196,12 @@ vertically, `alignItems` controls how they align horizontally.

Accepts one of the following values:

- `` `auto `` (default)
- `` `flexStart ``
- `` `flexEnd ``
- `` `center ``
- `` `stretch ``
- `` `baseline ``
- `` #auto `` (default)
- `` #"flex-start" ``
- `` #"flex-end" ``
- `` #center ``
- `` #stretch ``
- `` #baseline ``

Controls how a child aligns in the cross direction, overriding the `alignItems`
of the parent.
Expand Down Expand Up @@ -241,12 +241,12 @@ Number of logical pixels to offset the bottom edge of this component.

Accepts one of the following values:

- `` `inherit_ `` (default)
- `` `ltr ``
- `` `rtl ``
- `` #inherit `` (default)
- `` #ltr ``
- `` #rtl ``

`direction` specifies the directional flow of the user interface. The default is
`` `inherit_ ``, except for root node which will have value based on the current
`` #inherit ``, except for root node which will have value based on the current
locale.

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)
Expand All @@ -260,8 +260,8 @@ Only for

Accepts one of the following values:

- `` `flex `` (default)
- `` `none ``
- `` #flex `` (default)
- `` #none ``

Sets the display type of this component. It works similarly to `display` in CSS,
but only supports `flex` and `none`.
Expand Down Expand Up @@ -312,10 +312,10 @@ Accepts a `margin`.

Accepts one of the following values:

- `` `row ``
- `` `rowReverse ``
- `` `column `` (default)
- `` `columnReverse ``
- `` #row ``
- `` #"row-reverse" ``
- `` #column `` (default)
- `` #"column-reverse" ``

`flexDirection` controls which directions children of a container go. `row` goes
left to right, `column` goes top to bottom, and you may be able to guess what
Expand All @@ -342,8 +342,8 @@ Accepts a `float`.

Accepts one of the following values:

- `` `wrap `` (default)
- `` `nowrap ``
- `` #wrap `` (default)
- `` #nowrap ``

`flexWrap` controls whether children can wrap around after they hit the end of a
flex container.
Expand All @@ -364,12 +364,12 @@ sets the height of this component.

Accepts one of the following values:

- `` `flexStart `` (default)
- `` `flexEnd ``
- `` `center ``
- `` `spaceAround ``
- `` `spaceBetween ``
- `` `spaceEvenly ``
- `` #"flex-start" `` (default)
- `` #"flex-end" ``
- `` #center ``
- `` #"space-around" ``
- `` #"space-between" ``
- `` #"space-evenly" ``

`justifyContent` aligns children in the main direction. For example, if children
are flowing vertically, `justifyContent` controls how they align vertically.
Expand Down Expand Up @@ -500,12 +500,12 @@ Minimum width for this component, in logical pixels.

Accepts one of the following values:

- `` `visible `` (default)
- `` `hidden ``
- `` `scroll ``
- `` #visible `` (default)
- `` #hidden ``
- `` #scroll ``

`overflow` controls how children are measured and displayed. `` `hidden ``
causes views to be clipped while `` `scroll `` causes views to be measured
`overflow` controls how children are measured and displayed. `` #hidden ``
causes views to be clipped while `` #scroll `` causes views to be measured
independently of their parents main axis.

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
Expand Down Expand Up @@ -588,8 +588,8 @@ Setting `paddingVertical` is like setting both of `paddingTop` and

Accepts one of the following values:

- `` `absolute ``
- `` `relative `` (default)
- `` #absolute ``
- `` #relative `` (default)

`position` in React Native is similar to regular CSS, but everything is set to
`relative` by default, so `absolute` positioning is always just relative to the
Expand Down Expand Up @@ -815,8 +815,8 @@ style(~transform=[unsafeTransform({"translateZ": "0"})], ())

Accepts one of the following values:

- `` `visible ``
- `` `hidden ``
- `` #visible ``
- `` #hidden ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility)

Expand Down Expand Up @@ -936,8 +936,9 @@ When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.

Accepts one of the following values:

- `` `solid `` (default)
- `` `dotted ``
- `` #solid `` (default)
- `` #dotted ``
- `` #dashed ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)

Expand Down Expand Up @@ -1032,8 +1033,8 @@ Accepts a `float`.

Accepts one of the following values:

- `` `normal `` (default)
- `` `italic ``
- `` #normal `` (default)
- `` #italic ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)

Expand Down Expand Up @@ -1083,22 +1084,22 @@ Only accepts logical pixels.

Accepts one of the following values:

- `` `auto `` (default)
- `` `left ``
- `` `right ``
- `` `center ``
- `` `justify ``
- `` #auto `` (default)
- `` #left ``
- `` #right ``
- `` #center ``
- `` #justify ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)

#### `textAlignVertical`

Accepts one of the following values:

- `` `auto `` (default)
- `` `top ``
- `` `bottom ``
- `` `center ``
- `` #auto `` (default)
- `` #top ``
- `` #bottom ``
- `` #center ``

#### `textDecorationColor`

Expand All @@ -1110,21 +1111,21 @@ Accepts a `Color.t` (`string`).

Accepts one of the following values:

- `` `none `` (default)
- `` `underline ``
- `` `lineThrough ``
- `` `underlineLineThrough ``
- `` #none `` (default)
- `` #underline ``
- `` #"line-through" ``
- `` #"underline line-through" ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line)

#### `textDecorationStyle`

Accepts one of the following values:

- `` `solid ``
- `` `double ``
- `` `dotted ``
- `` `dashed ``
- `` #solid ``
- `` #double ``
- `` #dotted ``
- `` #dashed ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style)

Expand Down Expand Up @@ -1156,32 +1157,32 @@ You can see it as CSS `text-shadow` blur radius.

Accepts one of the following values:

- `` `none `` (default)
- `` `uppercase ``
- `` `lowercase ``
- `` `capitalize ``
- `` #none `` (default)
- `` #uppercase ``
- `` #lowercase ``
- `` #capitalize ``

- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)

#### `writingDirection`

Accepts one of the following values:

- `` `auto `` (default)
- `` `ltr ``
- `` `rtl ``
- `` #auto `` (default)
- `` #ltr ``
- `` #rtl ``

### Image Style Props

#### `resizeMode`

Accepts one of the following values:

- `` `cover ``
- `` `contain ``
- `` `stretch ``
- `` `repeat ``
- `` `center ``
- `` #cover ``
- `` #contain ``
- `` #stretch ``
- `` #repeat ``
- `` #center ``

Similar to CSS `background-size` values

Expand Down