Как вставить собственный тег HTML в Fulma / Fable? - PullRequest
Новая
       30

Как вставить собственный тег HTML в Fulma / Fable?

1 голос
/ 30 марта 2019

Я использую Fable (2) + Fulma (1.1) + Elmish (2) для веб-интерфейса и хочу добавить выпадающий список Select, как описано в Bulma здесь .Он использует HTML-тег <option> для элементов, но я не могу найти его нигде в библиотеке Fulma.В таком случае, как я могу написать произвольный тег в моем представлении?

1 Ответ

2 голосов
/ 30 марта 2019

В Fulma вам нужна конкретная вещь , но это не сразу видно в документации. Он есть, но вам нужно взглянуть на документы Fulma для элементов формы и посмотреть их демонстрацию формы. Там вы увидите следующее:

Select dropdown

Исходный код, который производит это в демо-версии, находится в этом разделе: 

   Field.div [ ]
        [ Label.label [ ]
            [ str "Subject" ]
          Control.div [ ]
            [ Select.select [ ]
                [ select [ DefaultValue "2" ]
                    [ option [ Value "1" ] [ str "Value n°1" ]
                      option [ Value "2"] [ str "Value n°2" ]
                      option [ Value "3"] [ str "Value n°3" ] ] ] ] ]

Я пока не знаю, как вставить произвольный тег; как только я узнаю, я отредактирую этот ответ, чтобы включить эту деталь. Но это должно решить вашу непосредственную проблему.

Редактировать: Что касается того, как создавать пользовательские элементы, вот что я нашел в Fable.React source : 

open Fable.React

let inline a props children = domEl "a" props children
let inline abbr props children = domEl "abbr" props children
let inline address props children = domEl "address" props children
// ...
let inline hr props = voidEl "hr" props
let inline img props = voidEl "img" props
let inline input props = voidEl "input" props
// ...
let inline svg props children = svgEl "svg" props children
let inline circle props children = svgEl "circle" props children
let inline clipPath props children = svgEl "clipPath" props children

Итак, в пространстве имен Fable.React есть три базовые функции: domEl, которая принимает имя тега, список свойств и список дочерних элементов; voidEl, который просто берет имя тега и список свойств (для тегов, которые HTML определяет как не имеющих потомков), и svgEl, который предназначен для элементов, которые являются частью определения <svg>, а не HTML (хотя на практике это работает точно так же, как domEl: , как вы можете видеть, их определения в Fable.React ) абсолютно идентичны. Чтобы создать собственный тег, вы можете сделать: 

domEl "customTag" [ ] [ children ]

Или: 

let inline custom props children = domEl "customTag" props children
custom [ ] [ children ]
...