WebSharper Popover API Binding

This repository provides an F# WebSharper binding for the Popover API, enabling WebSharper applications to show and hide HTML popovers using the native browser API.

Repository Structure

The repository consists of two main projects:

1. Binding Project:

   • Contains the F# WebSharper binding for the Popover API.

2. Sample Project:

   • Demonstrates how to use the Popover API with WebSharper syntax.
   • Includes a GitHub Pages demo: View Demo

Installation

To use this package in your WebSharper project, add the NuGet package:

   dotnet add package WebSharper.Popover

Building

Prerequisites

• .NET SDK installed on your machine.

Steps

1. Clone the repository:

   git clone https://github.com/dotnet-websharper/Popover.git
   cd Popover

2. Build the Binding Project:

   dotnet build WebSharper.Popover/WebSharper.Popover.fsproj

3. Build and Run the Sample Project:

   cd WebSharper.Popover.Sample
   dotnet build
   dotnet run

Example Usage

Below is an example of how to use the Popover API in a WebSharper project:

namespace WebSharper.Popover.Sample

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI
open WebSharper.UI.Client
open WebSharper.UI.Templating
open WebSharper.Popover

[<JavaScript>]
module Client =
    // The templates are loaded from the DOM, so you just can edit index.html
    // and refresh your browser, no need to recompile unless you add or remove holes.
    type IndexTemplate = Template<"wwwroot/index.html", ClientLoad.FromDocument>

    // Reference the popover element
    let myPopover = JS.Document.GetElementById("myPopover")
    let popover = myPopover |> As<HTMLElement>

    [<SPAEntryPoint>]
    let Main () =

        IndexTemplate.Main()
            // Show button click triggers showPopover on the target element
            .ShowBtn(fun _ ->
                popover.ShowPopover() |> ignore
            )
            // Hide button click triggers hidePopover on the target element
            .HideBtn(fun _ ->
                popover.HidePopover() |> ignore
            )
            .Doc()
        |> Doc.RunById "main"

This example demonstrates how to programmatically control the visibility of a native popover element using WebSharper and the Popover API.

Browser Support

• The Popover API is supported in most modern browsers. Check the compatibility table on MDN for more details.