Пятничный Elm (Часть IV)

1
2
3
4
5
6
7
8
9
10
11
12

import Html
 
names = [ "Pearl", "Steven", "Garnet", "Amethyst" ]
 
main =
  let
    sorted = List.sort names
    texts = List.map Html.text sorted
    textToItem text = Html.li [] [ text ]
    items = List.map textToItem texts
  in
    Html.ul [] items

• names объявлена как список строк.
• main - входная точка нашей программы, так же как и в примере про Hello World, хотя и немного сложнее.
• Тело функции main разделено на две части:

• в части let мы определили довольно много переменных
• которые использовали в части in

• sorted: мы использовали List.sort чтобы отсортировать имена в алфавитном порядке
• texts: мы использовали List.map чтобы применить функцию Html.text к каждому элементу отсортированного списка. Результат: список элементов типа HTML.text. (Elm не отображает тип данных строка в браузере. Вы всегда должны привести строки к типу HTML.text чтобы отобразить данные).
• textToItem объявляет новую функцию "на лету". Каждый элемент HTML.text оборачивается в функцию HTML.li, которая по сути является тегом
• items: мы снова использовали List.map чтобы применить функцию textToItem к каждому элементу списка texts. В результате получаем список элементов HTML li.
• Наконец, в части программы in функции main мы оборачиваем в список элементов li в элемент HTML ul который переводит в тег <ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import Html
import Html.Attributes
 
names = [ "Pearl", "Steven", "Garnet", "Amethyst" ]
 
main =
  let
    sorted = List.sort names
    texts = List.map Html.text sorted
    textToItem text =
      Html.li
        [ Html.Attributes.style [("font-style", "italic") ] ]
        [ text ]
    items = List.map textToItem texts
  in
    Html.div
      [ Html.Attributes.style
        [ ("position", "absolute")
        , ("width", "10em")
        , ("height", "10em")
        , ("top", "50%")
        , ("left", "50%")
        , ("transform", "translateX(-50%) translateY(-50%)")
        , ("overflow", "hidden")
        ]
      ]
      [ Html.ul [] items ]