#30daysofelm 23일 차: elm-ui를 사용한 간단한 레이아웃
24673 단어 elm
시도 + 소스 보기: https://ellie-app.com/c2WWjMTM4ZLa1
오늘의 프로젝트에 대해
몇 달 전에 React 프로젝트를 만들었는데 결국 Elm에서 리메이크하고 싶습니다: https://kristianpedersen.github.io/knights-tour-react/
기본적으로 체스판 위치를 클릭하면 프로그램이 기사가 보드의 모든 위치를 방문하는 유효한 동작 시퀀스를 찾습니다.
컨셉과 인터랙션에 만족하지만 비주얼은 많은 작업이 필요합니다.
특히 왼쪽 끝까지 배치된 보드가 이상해 보였고 카페인에 열광한 코딩 보난자에서 어떻게 든 SVG 라인의 크기를 조정할 수 있었지만 "수정"으로 인해 보드 크기가 조정되지 않았습니다. :디
또한 색상과 테두리가 15년 전에 만들어진 것처럼 보입니다.
Elm-ui는 읽기에 훨씬 좋습니다.
에서 이것을 다루었지만 CSS는 어려울 수 있습니다.
내 경우 CSS와 씨름하는 것은 대부분 제대로 배우지 못한 내 잘못이다.
그래도 다음은 중심에 있는 div입니다.
<html>
<head>
<style>
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
</style>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>
발신자 https://stackoverflow.com/questions/31217268/center-div-on-the-middle-of-screen
7일차의 elm-ui 프로그램은 다음과 같습니다.
import Element exposing (..)
centeredDiv =
column
[ width (px 200)
, height (px 200)
, centerX
, centerY
]
[ el [ centerX, centerY ] (text "I am centered")
]
main =
layout [] centeredDiv
두 번째 예에서는 소음이 훨씬 적습니다. 자, 이렇게 작은 예에서 이것이 사실이라면 이것이 어떻게 합산되는지 상상해 보십시오.
오늘의 코드
저는 아직 elm-ui 초보자입니다. 잘못된 유형 주석을 제공했기 때문에 처음에 몇 가지 문제가 발생했습니다.
제거하고 나니 오류도 사라져서 오늘이 자동형 추론의 날입니다.
일반 슬라이더 기능
elm-ui에서 슬라이더를 만드는 코드는 솔직히 좀 깁니다.
내 프로젝트에는 두 개의 슬라이더가 필요했지만 두 개의 거대한 슬라이더 기능을 원하지 않았기 때문에 하나의 일반화된 슬라이더 기능을 만들었습니다.
slider attributes =
Input.slider
[ height (px 30)
, behindContent
(el
[ width fill
, height (px 2)
, centerY
, Background.color (rgb255 255 255 255)
, Border.rounded 2
]
none
)
]
{ onChange = attributes.message
, label =
Input.labelAbove []
(text attributes.text)
, min = attributes.min
, max = attributes.max
, step = Just 1
, value = attributes.value
, thumb =
Input.defaultThumb
}
attributes는 더 작은 슬라이더 기능에서 원하는 정보가 포함된 레코드입니다.
위의 전체 혼란을 두 번 반복하는 대신 보드 크기 및 애니메이션 속도에 대한 슬라이더가 이제 더 좋아 보입니다.
sliderBoardSize model =
el [ alignLeft ]
(slider
{ min = 5
, max = 26
, value = model.boardSize
, text = "Board size"
, message = UpdateBoardSize
}
)
sliderAnimationRate model =
el [ alignRight ]
(slider
{ min = 5
, max = 1000
, value = model.animationSpeed
, text = "Animation speed"
, message = UpdateAnimationSpeed
}
)
컨트롤 패널
그러면 두 개의 슬라이더가 다음과 같은 "탐색 모음"에 포함됩니다.
controls model =
row [ width fill, centerX, spacing 30, padding 30, Background.color (rgb255 200 200 100) ]
[ sliderBoardSize model
, sliderAnimationRate model
]
무슨 할 말이 있습니까? 두 개의 슬라이더가 있는 전체 너비 행입니다. elm-ui 코드가 정말 보기 좋습니다! <3
정보 텍스트
그런 다음 컨트롤 아래에 몇 가지 정보 텍스트를 표시하고 싶었습니다.
infoText model =
row
[ width fill
, centerX
, spacing 30
, padding 30
, Background.color (rgb255 50 50 50)
, Font.color (rgb255 200 200 200)
]
[ el [ centerX ]
(text
("The board size is "
++ (model.boardSize |> Debug.toString)
++ ", and the animation interval is "
++ (model.animationSpeed |> Debug.toString)
++ " ms"
)
)
]
"판자"
솔직히 지금은 그냥 넷플릭스를 보고 싶어서 글자와 숫자로 칠판을 제대로 칠하지 않았습니다. 내일 할게요.
지금은 보드 크기 슬라이더와 함께 확장 및 축소됩니다. 꽤 멋지다고 생각합니다. :)
showRow model =
row [ width fill, height fill ] <|
(List.range 1 (floor model.boardSize)
|> List.map (\_ -> el [ width fill, centerY ] (text "Hi there"))
)
showBoard model =
column [ width fill, height fill, Font.center ]
(List.range 1 (floor model.boardSize)
|> List.map (\_ -> showRow model)
)
먼저 8개의 셀 행을 만듭니다. ********
그런 다음 다음 중 8개로 열을 만듭니다.
********
********
********
********
********
********
********
********
기본 전체 화면 컨테이너 및 보기 기능
view model =
Element.layout []
(fullscreenContainer model)
fullscreenContainer model =
column [ width fill, height fill, spacing 0, padding 0 ] <|
List.map
(\elmUiSection -> elmUiSection model)
-- I want to add the "buttons" function to this list, but Elm won't let me because of a type mismatch
[ controls, infoText, showBoard ]
Element.layout는 이 elm-ui 응용 프로그램의 최상위 수준입니다. 내 경우에는 모든 것을 포함하는 column만 사용합니다.
각각의 elmUiSection s, ([controls, infoText, showBoard])가 모델을 인수로 사용하기 때문에 지도를 사용하고 있습니다.
나는 또한 이것을 쓸 수 있었다:
column [ width fill, height fill, spacing 0, padding 0 ] <|
[ controls model, infoText model, showBoard model ]
하지만 그런 불필요한 반복은 나를 잠들게 할 뿐이다.
이 목록에서는 "버튼"기능이 작동하지 않았습니다. 목록은 동일한 유형의 항목으로만 구성될 수 있으며 버튼은 메시지onPress 때문에 다른 유형입니다.
메인, 모델, 업데이트, 일반적인 것
module Main exposing (..)
import Browser
import Element exposing (Element, alignLeft, alignRight, behindContent, centerX, centerY, column, el, fill, height, none, padding, px, rgb255, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, view = view
, update = update
}
type alias Model =
{ boardSize : Float
, animationSpeed : Float
}
init : Model
init =
{ boardSize = 8, animationSpeed = 50 }
type Msg
= UpdateBoardSize Float
| UpdateAnimationSpeed Float
| BoardSizeFromButton Int
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateBoardSize v ->
{ model | boardSize = v }
UpdateAnimationSpeed v ->
{ model | animationSpeed = v }
BoardSizeFromButton v ->
{ model | boardSize = toFloat v }
이것은 매우 표준적인 Elm 설정입니다. Msg 이름이 명확하지 않기 때문에 확실히 변경하겠습니다. SliderBoardSize , SliderAnimationSpeed 및 ButtonBoardSize 가 더 나은 이름입니다.
그리고 거의 맨 위에 있어서 Element에서 이렇게 많은 개별적인 것을 노출하기보다는 그냥 다 노출하는 것이 좋겠다는 생각이 듭니다.
결론
이것은 elm-ui를 사용한 두 번째 시간이었습니다. 유형 주석은 처음에는 약간의 어려움이 있었지만 그 외에는 정말 직관적이라고 말해야 합니다.
솔직히 말해서 오늘의 프로젝트를 CSS로 만들려면 훨씬 더 많은 노력이 필요했을 것입니다.
제 CSS 기술이 좋지 않아서 elm-ui 를 사용하고, React 코드에서 런타임 오류가 발생해서 elm 를 사용합니다.
향후 프로젝트를 위해 elm-ui를 더 자세히 살펴볼 것입니다. 정말 좋습니다.
Reference
이 문제에 관하여(#30daysofelm 23일 차: elm-ui를 사용한 간단한 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/kristianpedersen/30daysofelm-day-23-simple-layout-with-elm-ui-274l
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
에서 이것을 다루었지만 CSS는 어려울 수 있습니다.
내 경우 CSS와 씨름하는 것은 대부분 제대로 배우지 못한 내 잘못이다.
그래도 다음은 중심에 있는 div입니다.
<html>
<head>
<style>
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
</style>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>
발신자 https://stackoverflow.com/questions/31217268/center-div-on-the-middle-of-screen
7일차의 elm-ui 프로그램은 다음과 같습니다.
import Element exposing (..)
centeredDiv =
column
[ width (px 200)
, height (px 200)
, centerX
, centerY
]
[ el [ centerX, centerY ] (text "I am centered")
]
main =
layout [] centeredDiv
두 번째 예에서는 소음이 훨씬 적습니다. 자, 이렇게 작은 예에서 이것이 사실이라면 이것이 어떻게 합산되는지 상상해 보십시오.
오늘의 코드
저는 아직 elm-ui 초보자입니다. 잘못된 유형 주석을 제공했기 때문에 처음에 몇 가지 문제가 발생했습니다.
제거하고 나니 오류도 사라져서 오늘이 자동형 추론의 날입니다.
일반 슬라이더 기능
elm-ui에서 슬라이더를 만드는 코드는 솔직히 좀 깁니다.
내 프로젝트에는 두 개의 슬라이더가 필요했지만 두 개의 거대한 슬라이더 기능을 원하지 않았기 때문에 하나의 일반화된 슬라이더 기능을 만들었습니다.
slider attributes =
Input.slider
[ height (px 30)
, behindContent
(el
[ width fill
, height (px 2)
, centerY
, Background.color (rgb255 255 255 255)
, Border.rounded 2
]
none
)
]
{ onChange = attributes.message
, label =
Input.labelAbove []
(text attributes.text)
, min = attributes.min
, max = attributes.max
, step = Just 1
, value = attributes.value
, thumb =
Input.defaultThumb
}
attributes는 더 작은 슬라이더 기능에서 원하는 정보가 포함된 레코드입니다.
위의 전체 혼란을 두 번 반복하는 대신 보드 크기 및 애니메이션 속도에 대한 슬라이더가 이제 더 좋아 보입니다.
sliderBoardSize model =
el [ alignLeft ]
(slider
{ min = 5
, max = 26
, value = model.boardSize
, text = "Board size"
, message = UpdateBoardSize
}
)
sliderAnimationRate model =
el [ alignRight ]
(slider
{ min = 5
, max = 1000
, value = model.animationSpeed
, text = "Animation speed"
, message = UpdateAnimationSpeed
}
)
컨트롤 패널
그러면 두 개의 슬라이더가 다음과 같은 "탐색 모음"에 포함됩니다.
controls model =
row [ width fill, centerX, spacing 30, padding 30, Background.color (rgb255 200 200 100) ]
[ sliderBoardSize model
, sliderAnimationRate model
]
무슨 할 말이 있습니까? 두 개의 슬라이더가 있는 전체 너비 행입니다. elm-ui 코드가 정말 보기 좋습니다! <3
정보 텍스트
그런 다음 컨트롤 아래에 몇 가지 정보 텍스트를 표시하고 싶었습니다.
infoText model =
row
[ width fill
, centerX
, spacing 30
, padding 30
, Background.color (rgb255 50 50 50)
, Font.color (rgb255 200 200 200)
]
[ el [ centerX ]
(text
("The board size is "
++ (model.boardSize |> Debug.toString)
++ ", and the animation interval is "
++ (model.animationSpeed |> Debug.toString)
++ " ms"
)
)
]
"판자"
솔직히 지금은 그냥 넷플릭스를 보고 싶어서 글자와 숫자로 칠판을 제대로 칠하지 않았습니다. 내일 할게요.
지금은 보드 크기 슬라이더와 함께 확장 및 축소됩니다. 꽤 멋지다고 생각합니다. :)
showRow model =
row [ width fill, height fill ] <|
(List.range 1 (floor model.boardSize)
|> List.map (\_ -> el [ width fill, centerY ] (text "Hi there"))
)
showBoard model =
column [ width fill, height fill, Font.center ]
(List.range 1 (floor model.boardSize)
|> List.map (\_ -> showRow model)
)
먼저 8개의 셀 행을 만듭니다. ********
그런 다음 다음 중 8개로 열을 만듭니다.
********
********
********
********
********
********
********
********
기본 전체 화면 컨테이너 및 보기 기능
view model =
Element.layout []
(fullscreenContainer model)
fullscreenContainer model =
column [ width fill, height fill, spacing 0, padding 0 ] <|
List.map
(\elmUiSection -> elmUiSection model)
-- I want to add the "buttons" function to this list, but Elm won't let me because of a type mismatch
[ controls, infoText, showBoard ]
Element.layout는 이 elm-ui 응용 프로그램의 최상위 수준입니다. 내 경우에는 모든 것을 포함하는 column만 사용합니다.
각각의 elmUiSection s, ([controls, infoText, showBoard])가 모델을 인수로 사용하기 때문에 지도를 사용하고 있습니다.
나는 또한 이것을 쓸 수 있었다:
column [ width fill, height fill, spacing 0, padding 0 ] <|
[ controls model, infoText model, showBoard model ]
하지만 그런 불필요한 반복은 나를 잠들게 할 뿐이다.
이 목록에서는 "버튼"기능이 작동하지 않았습니다. 목록은 동일한 유형의 항목으로만 구성될 수 있으며 버튼은 메시지onPress 때문에 다른 유형입니다.
메인, 모델, 업데이트, 일반적인 것
module Main exposing (..)
import Browser
import Element exposing (Element, alignLeft, alignRight, behindContent, centerX, centerY, column, el, fill, height, none, padding, px, rgb255, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, view = view
, update = update
}
type alias Model =
{ boardSize : Float
, animationSpeed : Float
}
init : Model
init =
{ boardSize = 8, animationSpeed = 50 }
type Msg
= UpdateBoardSize Float
| UpdateAnimationSpeed Float
| BoardSizeFromButton Int
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateBoardSize v ->
{ model | boardSize = v }
UpdateAnimationSpeed v ->
{ model | animationSpeed = v }
BoardSizeFromButton v ->
{ model | boardSize = toFloat v }
이것은 매우 표준적인 Elm 설정입니다. Msg 이름이 명확하지 않기 때문에 확실히 변경하겠습니다. SliderBoardSize , SliderAnimationSpeed 및 ButtonBoardSize 가 더 나은 이름입니다.
그리고 거의 맨 위에 있어서 Element에서 이렇게 많은 개별적인 것을 노출하기보다는 그냥 다 노출하는 것이 좋겠다는 생각이 듭니다.
결론
이것은 elm-ui를 사용한 두 번째 시간이었습니다. 유형 주석은 처음에는 약간의 어려움이 있었지만 그 외에는 정말 직관적이라고 말해야 합니다.
솔직히 말해서 오늘의 프로젝트를 CSS로 만들려면 훨씬 더 많은 노력이 필요했을 것입니다.
제 CSS 기술이 좋지 않아서 elm-ui 를 사용하고, React 코드에서 런타임 오류가 발생해서 elm 를 사용합니다.
향후 프로젝트를 위해 elm-ui를 더 자세히 살펴볼 것입니다. 정말 좋습니다.
Reference
이 문제에 관하여(#30daysofelm 23일 차: elm-ui를 사용한 간단한 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/kristianpedersen/30daysofelm-day-23-simple-layout-with-elm-ui-274l
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
slider attributes =
Input.slider
[ height (px 30)
, behindContent
(el
[ width fill
, height (px 2)
, centerY
, Background.color (rgb255 255 255 255)
, Border.rounded 2
]
none
)
]
{ onChange = attributes.message
, label =
Input.labelAbove []
(text attributes.text)
, min = attributes.min
, max = attributes.max
, step = Just 1
, value = attributes.value
, thumb =
Input.defaultThumb
}
sliderBoardSize model =
el [ alignLeft ]
(slider
{ min = 5
, max = 26
, value = model.boardSize
, text = "Board size"
, message = UpdateBoardSize
}
)
sliderAnimationRate model =
el [ alignRight ]
(slider
{ min = 5
, max = 1000
, value = model.animationSpeed
, text = "Animation speed"
, message = UpdateAnimationSpeed
}
)
controls model =
row [ width fill, centerX, spacing 30, padding 30, Background.color (rgb255 200 200 100) ]
[ sliderBoardSize model
, sliderAnimationRate model
]
infoText model =
row
[ width fill
, centerX
, spacing 30
, padding 30
, Background.color (rgb255 50 50 50)
, Font.color (rgb255 200 200 200)
]
[ el [ centerX ]
(text
("The board size is "
++ (model.boardSize |> Debug.toString)
++ ", and the animation interval is "
++ (model.animationSpeed |> Debug.toString)
++ " ms"
)
)
]
showRow model =
row [ width fill, height fill ] <|
(List.range 1 (floor model.boardSize)
|> List.map (\_ -> el [ width fill, centerY ] (text "Hi there"))
)
showBoard model =
column [ width fill, height fill, Font.center ]
(List.range 1 (floor model.boardSize)
|> List.map (\_ -> showRow model)
)
********
********
********
********
********
********
********
********
view model =
Element.layout []
(fullscreenContainer model)
fullscreenContainer model =
column [ width fill, height fill, spacing 0, padding 0 ] <|
List.map
(\elmUiSection -> elmUiSection model)
-- I want to add the "buttons" function to this list, but Elm won't let me because of a type mismatch
[ controls, infoText, showBoard ]
column [ width fill, height fill, spacing 0, padding 0 ] <|
[ controls model, infoText model, showBoard model ]
module Main exposing (..)
import Browser
import Element exposing (Element, alignLeft, alignRight, behindContent, centerX, centerY, column, el, fill, height, none, padding, px, rgb255, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, view = view
, update = update
}
type alias Model =
{ boardSize : Float
, animationSpeed : Float
}
init : Model
init =
{ boardSize = 8, animationSpeed = 50 }
type Msg
= UpdateBoardSize Float
| UpdateAnimationSpeed Float
| BoardSizeFromButton Int
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateBoardSize v ->
{ model | boardSize = v }
UpdateAnimationSpeed v ->
{ model | animationSpeed = v }
BoardSizeFromButton v ->
{ model | boardSize = toFloat v }
이것은
elm-ui를 사용한 두 번째 시간이었습니다. 유형 주석은 처음에는 약간의 어려움이 있었지만 그 외에는 정말 직관적이라고 말해야 합니다.솔직히 말해서 오늘의 프로젝트를 CSS로 만들려면 훨씬 더 많은 노력이 필요했을 것입니다.
제 CSS 기술이 좋지 않아서
elm-ui 를 사용하고, React 코드에서 런타임 오류가 발생해서 elm 를 사용합니다.향후 프로젝트를 위해 elm-ui를 더 자세히 살펴볼 것입니다. 정말 좋습니다.
Reference
이 문제에 관하여(#30daysofelm 23일 차: elm-ui를 사용한 간단한 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kristianpedersen/30daysofelm-day-23-simple-layout-with-elm-ui-274l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
