Fable.ShadowStyles 1.0.0

.NET Standard 2.0

dotnet add package Fable.ShadowStyles --version 1.0.0

NuGet\Install-Package Fable.ShadowStyles -Version 1.0.0

此命令旨在在 Visual Studio 中的包管理器控制台中使用，因为它使用了 NuGet 模块的 Install-Package 版本。

<PackageReference Include="Fable.ShadowStyles" Version="1.0.0" />

对于支持包引用的项目，将此 XML 节复制到项目文件中以引用软件包。

paket add Fable.ShadowStyles --version 1.0.0

NuGet 团队不为此客户端提供支持。请联系其维护者以获取支持。

#r "nuget: Fable.ShadowStyles, 1.0.0"

#r 指令可用于 F# 交互式和 Polyglot Notebooks。将此内容复制到交互工具或脚本的源代码中，以便引用软件包。

// Install Fable.ShadowStyles as a Cake Addin
#addin nuget:?package=Fable.ShadowStyles&version=1.0.0

// Install Fable.ShadowStyles as a Cake Tool
#tool nuget:?package=Fable.ShadowStyles&version=1.0.0

NuGet 团队不为此客户端提供支持。请联系其维护者以获取支持。

ShadowStyles

由 Feliz.Engine 支持

Shadow Styles 是一个 F# 包装器，它实现了可构建样式表，使得您可以为您的 Fable 应用程序添加样式，生成自定义元素或 Web 组件（如 lit-html + Fable.Haunted），未来还将支持 Sutil + Fable.Haunted。

F# 中的 CSS

可构建样式表（连同 CSS 模块导入规范）试图解决 CSS in JS 的问题，而阴影 DOM 解决了封装问题，但它使得样式共享变得困难，因此我们希望使用类似可构建样式表的东西。

使用示例

在这里，我们将使用 Fable.Haunted 和 lit-html 来定义一个 Web 组件（即具有阴影根的自定义元素）。我们将在当前文档中添加一个样式表，并在 flit-app Web 组件中添加一个本地样式表。

注意：对于 Safari 和 Firefox，需要一个 polyfill
<script src="https://unpkg.com/construct-style-sheets-polyfill"></script>

module Main

open Browser.Dom
open Lit
open Haunted
open Fable.Core.JsInterop

open ShadowStyles
open ShadowStyles.Types
open ShadowStyles.Operators

// note we use SCss to prevent colisions with things like Fable.Lit Css

let globalStyles =
  [ "html, body"
    => [ SCss.padding 0
         SCss.margin 0
         SCss.fontFamily
           "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" ]
    "body" => [ SCss.color "blue" ] ]

/// the `=>` operator is a proxy for: `CSSRule(selector, cssPropertySequence)`

// these get applied to the whole document (false means we're not using shadowDOM)
ShadowStyles.adoptStyleSheet (document, globalStyles, false)

let myComponent () =
  // with Haunted, the functions are binded to the HTML element they are assigned
  let host = jsThis
  // which helps us get a reference to the element's shadow root

  let localStyles =
    // while classes are not required because inside
    // shadow DOM element styles are isolated
    // we'll use it for ilustration purposes
    [ ".my-rule"
      => [ SCss.displayFlex
           SCss.alignContentCenter
           SCss.color "red" ] ]

  // the following function call applies multiple (and local) styles to the host even in shadowDOM
  // let existingGlobalStyles = document?adoptedStyleSheets
  // ShadowStyles.adoptStyleSheets (host, existingGlobalStyles, localStyles)

  // this applies a single style to the host in shadowDOM
  ShadowStyles.adoptStyleSheet (host, localStyles)

  html
    $"""
    <div class="my-rule">
      <h1>Hello, World!</h1>
    </div>
  """

defineComponent
  "flit-app"
  (Haunted.Component(myComponent, {| useShadowDOM = true |}))

<!DOCTYPE html>
<html>
  <head>
    <title>Lit + Fable Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="fable.ico" />
    
    <script src="https://unpkg.com/construct-style-sheets-polyfill"></script>
  </head>
  <body>
    <div>outside flit-app!</div>
    <flit-app></flit-app>
    <script type="module" src="/dist/Main.fs.js"></script>
  </body>
</html>

产品	兼容的以及额外的计算目标框架版本。
.NET	net5.0 已计算。 net5.0-windows 已计算。 net6.0 已计算。 net6.0-android 已计算。 net6.0-ios 已计算。 net6.0-maccatalyst 已计算。 net6.0-macos 已计算。 net6.0-tvos 已计算。 net6.0-windows 已计算。 net7.0 已计算。 net7.0-android 已计算。 net7.0-ios 已计算。 net7.0-maccatalyst 已计算。 net7.0-macos 已计算。 net7.0-tvos 已计算。 net7.0-windows 已计算。 net8.0 已计算。 net8.0-android 已计算。 net8.0-browser 已计算。 net8.0-ios 已计算。 net8.0-maccatalyst 已计算。 net8.0-macos 已计算。 net8.0-tvos 已计算。 net8.0-windows 已计算。
.NET Core	netcoreapp2.0 已计算。 netcoreapp2.1 已计算。 netcoreapp2.2 已计算。 netcoreapp3.0 已计算。 netcoreapp3.1 已计算。
.NET Standard	netstandard2.0 兼容。 netstandard2.1 已计算。
.NET Framework	net461 已计算。 net462 已计算。 net463 已计算。 net47 已计算。 net471 已计算。 net472 已计算。 net48 已计算。 net481 已计算。
MonoAndroid	monoandroid 已计算。
MonoMac	monomac 已计算。
MonoTouch	monotouch 已计算。
Tizen	tizen40 已计算。 tizen60 已计算。
Xamarin.iOS	xamarinios 已计算。
Xamarin.Mac	xamarinmac 已计算。
Xamarin.TVOS	xamarintvos 已计算。
Xamarin.WatchOS	xamarinwatchos 已计算。

兼容目标框架

包中包含的目标框架

有关目标框架和.NET Standard的更多信息。

.NETStandard 2.0
- Fable.Browser.Css (>= 2.2.0)
- Feliz.Engine (>= 1.0.0-beta-004)
- FSharp.Core (>= 6.0.2)

NuGet 包

此包未被任何 NuGet 包使用。

GitHub 仓库

此包未被任何流行的 GitHub 仓库使用。