mdgriffith/elm-ui
1
1
Fork 0
mirror of https://github.com/mdgriffith/elm-ui.git synced 2024-10-26 17:59:15 +03:00
Code Issues Projects Releases Wiki Activity

remove clipX and clipY in favor of clipped

Browse Source
This commit is contained in:
Matthew Griffith 2019-10-20 19:54:14 -04:00 committed by mdgriffith
parent 3a0cf4fd93
commit 55bffb60e9
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
notes/2.0-CHANGELOG.md
View File

@ -3,4 +3,5 @@
- Button is no longer disable-able. See recommendation on `Element.Input`.
- `Font.external` has been removed. Fonts need to be included in the `<head>` of the html document in order to avoid the render flashing. Remember to set `font-display: swap`!
- `scrollbars`, `scrollbarX`, and `scrollbarY` have been removed in favor of `viewport`.
- `modular` has been removed. More recently I've had a preference for simpler scales with explicit values instead of being generated via function. Though feel free to copy-paste that function into your project if you like it!
- `modular` has been removed. More recently I've had a preference for simpler scales with explicit values instead of being generated via function. Though feel free to copy-paste that function into your project if you like it!
- `clipX`, `clipY` have been moved in favor of `clipped`.

42
src/Element.elm
View File

@ -10,8 +10,7 @@ module Element exposing
, centerX, centerY, alignLeft, alignRight, alignTop, alignBottom
, transparent, alpha, pointer
, moveUp, moveDown, moveRight, moveLeft, rotate, scale
, viewport
, clip, clipX, clipY
, viewport, clipped
, layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle
, link, newTabLink, download, downloadAs
, image
@ -93,7 +92,7 @@ Alignment can be used to align an `Element` within another `Element`.
Element.el [ centerX, alignTop ] (text "I'm centered and aligned top!")
If alignment is set on elements in a layout such as `row`, then the element will push the other elements in that direction. Here's an example.
If alignment is set on elements in a layout such as a `row`, then the element will push the other elements in that direction. Here's an example.
Element.row []
[ Element.el [] Element.none
@ -129,11 +128,7 @@ For scrolling element, we're going to borrow some terminology from 3D graphics j
Essentially a `viewport` is the window that you're looking through. If the content is larger than the viewport, then scrollbars will appear.
@docs viewport
Clip the content if it overflows.
@docs clip, clipX, clipY
@docs viewport, clipped
# Rendering
@ -170,9 +165,10 @@ Let's say we want a dropdown menu. Essentially we want to say: _put this element
]
This will result in
|- I'm normal! -|
I'm below
/---------------
|- I'm normal! -|
---------------/
I'm below
Where `"I'm Below"` doesn't change the size of `Element.row`.
@ -197,12 +193,12 @@ You'll also need to retrieve the initial window size. You can either use [`Brows
@docs Device, DeviceClass, Orientation, classifyDevice
## Mapping
# Mapping
@docs map, mapAttribute
## Compatibility
# Compatibility
@docs html, htmlAttribute
@ -1548,6 +1544,26 @@ scrollbarX =
Internal.Class Flag.overflow classes.scrollbarsX
{-| Clip the content if it overflows.
Similar to `viewport`, this element will fill the space it's given.
If the content overflows this element, it will be clipped.
-}
clipped : List (Attribute msg) -> Element msg -> Element msg
clipped attrs child =
Internal.element
Internal.asEl
Internal.div
(clip
:: width fill
:: height fill
:: attrs
)
(Internal.Unkeyed [ child ])
{-| -}
clip : Attribute msg
clip =