FsTachyons 1.0.0

FsTachyons

open FsTachyons
open FsTachyons
open FsTachyons.Tac

Elem.h1 [ Attr.class' (tac [ f3; f1_m; f_headline_l ])]
        [ Text.raw "Hello World!" ]
// Produces: <h1 class="f3 f1-m f-headline-l">Title</h1>

注意： FsTachyons 仅包含在 演示用途。

FsTachyons 是一个 F# API，用于功能性的 CSS 库 Tachyons，人类的功能性 CSS。

主要功能

• 通过 tac [] 自动帮助构建复杂的类字符串。
• 便于发现 Tachyons 类。
• 使用本机 F# 生成类字符串。
• 通过创建自定义类轻松扩展。

设计目标

• 为所有 所有 Tachyons 类提供可发现的功能。
• 可集成到 任何 F# 标记 DSL。
• 对了解 Tachyons 的人来说易学。

概述

FsTachyons 将所有 Tachyons CSS 类映射到 Tac 模块中的函数。这些类型可以组合在一起使用 tac [] 辅助函数形成类字符串，或使用 + 操作符进行组合。

要转义 CSS 规范中有效但 F# 中无效的字符，对 Tachyons 类进行了以下放大：

• 移除了前导 .（例如，.red 成为 red）。
• 将 - 替换为 _（例如，.b--red 成为 b__red）。

与 FsTachyons 一起使用

FsTachyons 有用于元素 & 属性的模块，这使我们能够导入 FsTachyons.Tac，使类字符串定义更加简短。

open FsTachyons
open FsTachyons
open FsTachyons.Tac

// <p class="measure lh-copy">Lorem ipsum</p>
Elem.p [ Attr.class' (tac [ measure; lh_copy ])]
       [ Text.raw "Lorem ipsum" ]

// <h1 class="f3 f1-m f-headline-l">Title</h1>
Elem.h1 [ Attr.class' (tac [ f3; f1_m; f_headline_l ])]
        [ Text.raw "Hello World!" ]

// <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
Elem.a [ Attr.class' (tac [ f6; link; dim; br1; ph3; pv2; dib; white; bg_black ]) ]
       [ Text.raw "Button Text" ]

与Feliz的用法

open Feliz
open FsTachyons
open FsTachyons.Tac

// <p class="measure lh-copy">Lorem ipsum</p>
Elem.p [ prop.className [ tac [ measure; lh_copy ] ]
         prop.text "Lorem ipsum" ]

// <h1 class="f3 f1-m f-headline-l">Title</h1>
Elem.h1 [ prop.className [ tac [ f3; f1_m; f_headline_l ] ]
          prop.text "Hello World!" ]

// <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
Elem.a [ prop.className [ tac [ f6; link; dim; br1; ph3; pv2; dib; white; bg_black ] ]
         prop.text "Button Text" ]

与Giraffe.ViewEngine的用法

使用Giraffe的HTML生成方法时，必须通过Tac模块引用类函数。

open FsTachyons
open Giraffe.ViewEngine

// <p class="measure lh-copy">Lorem ipsum</p>
p [ _class (tac [Tac.measure; Tac.lh_copy ])]
  [ rawText "Lorem ipsum" ]

// <h1 class="f3 f1-m f-headline-l">Title</h1>
h1 [ _class (tac [ Tac.f3; Tac.f1_m; Tac.f_headline_l ])]
   [ rawText "Hello World!" ]

// <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
a [ _class (tac [ Tac.f6; Tac.link; Tac.dim; Tac.br1; Tac.ph3; Tac.pv2; Tac.dib; Tac.white; Tac.bg_black ]) ]
  [ rawText "Button Text" ]

发现bug了吗？

这里有一个问题。

许可证

由多伦多地区的NHLPA Engineering构建，许可证为MIT。