From 7d80b6f2142c1522d86559d05789a06252f8ee9b Mon Sep 17 00:00:00 2001 From: indaco Date: Mon, 6 May 2024 14:33:42 +0200 Subject: [PATCH] docs(README.md): update --- README.md | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1cd9225..3413b8f 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,9 @@ Ensure your project is using Go Modules (it will have a `go.mod` file in its roo ## Usage +> [!TIP] +> refer to the [Examples](#examples) section. + Import the Dropdown module into your project: ```go @@ -99,6 +102,8 @@ func HandleHome(w http.ResponseWriter, r *http.Request) { ### Dropdown Component Structure - Markup +In your `templ` file, defines the structure for the dropdown component. + > [!IMPORTANT] > It is crucial to ensure that the value passed to `gropdown.Root` **matches** the one used when adding the `gropdownConfig` to the `configMap` as per step above. This ensures that multiple dropdowns on the same page function independently. @@ -145,37 +150,43 @@ func HandleHome(w http.ResponseWriter, r *http.Request) { - `GropdownCSS`: it supplies the required CSS, encapsulating the visual design and layout specifics of the component. - `GropdownJS`: it provides the JavaScript logic essential for dynamic behaviors such as displaying, keyboard navigation and interaction with the component. -To facilitate integration with Go's `template/html` standard library, `gropdown` includes a dedicated HTMLGenerator type to seamlessly integrate the component into web applications built with Go's `html/template standard` library. +To facilitate integration with Go's `template/html` standard library, `gropdown` includes a dedicated `HTMLGenerator` type to seamlessly integrate the component into web applications built with Go's `html/template standard` library. There are methods acting as wrappers to the templ's `templ.ToGoHTML`, generate the necessary HTML to be embedded them into server-rendered pages: - `GropdownCSSToGoHTML`: render the `GropdownCSS` component into a `template.HTML` value. - `GropdownJSToGoHTML`: render the `GropdownJS` component into a `template.HTML` value. -> Note: refer to the [Examples](#examples) section to see how to use `gropdown` with templ and `html/template`. - ## API Reference -gropdown.Root +

gropdown.Root

| Property | Type | Description | |:---------|:---------|:-------------------------------------------------------| | `id` | _string_ | The unique identifier for the dropdown menu component. | -gropdown.Button +

gropdown.Button

| Property | Type | Description | |:---------|:---------------|:-----------------------------------------------------| | `label` | _string_ | The text displayed for the dropdown menu button. | | `icon` | [_ButtonIcon_] | The icon displayed next to the dropdown menu button. | -gropdown.Item +

gropdown.Content

+ +None + +

gropdown.Item

| Property | Type | Description | |:---------|:----------------|:---------------------------------------------------------------------| | `label` | _string_ | The text displayed for the dropdown menu item. | | `opts` | [_ItemOptions_] | The options for configuring the behavior and appearance of the item. | +

gropdown.Divider

+ +None + ## Accessibility (A11Y) The dropdown component is designed to be accessible to screen readers and supports keyboard navigation according to the [WAI-ARIA pattern for menu buttons](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/#kbd_label).