From 6cf3bc7a931564e626b415071b9caa7d82ec978e Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Fri, 26 Jan 2024 18:15:26 -0800 Subject: [PATCH] Stubbed out more guide pages --- guide/src/SUMMARY.md | 20 ++++++++------------ guide/src/widgets/controls/button.md | 12 ++++++++++++ guide/src/widgets/controls/canvas.md | 13 +++++++++++++ guide/src/widgets/controls/checkbox.md | 14 ++++++++++++++ guide/src/widgets/controls/color-pickers.md | 18 ++++++++++++++++++ guide/src/widgets/controls/delimiter.md | 6 ++++++ guide/src/widgets/controls/radio.md | 8 ++++++++ guide/src/widgets/controls/select.md | 9 +++++++++ guide/src/widgets/layout/list.md | 13 +++++++++++++ 9 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 guide/src/widgets/controls/button.md create mode 100644 guide/src/widgets/controls/canvas.md create mode 100644 guide/src/widgets/controls/checkbox.md create mode 100644 guide/src/widgets/controls/color-pickers.md create mode 100644 guide/src/widgets/controls/delimiter.md create mode 100644 guide/src/widgets/controls/radio.md create mode 100644 guide/src/widgets/controls/select.md create mode 100644 guide/src/widgets/layout/list.md diff --git a/guide/src/SUMMARY.md b/guide/src/SUMMARY.md index 4935e04..a0028e7 100644 --- a/guide/src/SUMMARY.md +++ b/guide/src/SUMMARY.md @@ -13,6 +13,7 @@ - [Multi-Widget Layout](./widgets/multi-layout.md) - [Grid](./widgets/layout/grid.md) - [Layers](./widgets/layout/layers.md) + - [List](./widgets/layout/list.md) - [Stack](./widgets/layout/stack.md) - [Wrap](./widgets/layout/wrap.md) - [Single-widget Layout](./widgets/single-layout.md) @@ -22,18 +23,13 @@ - [Expand](./widgets/layout/expand.md) - [Resize](./widgets/layout/resize.md) - [Controls](./widgets/controls.md) - - [Button]() - - [Canvas]() - - [Checkbox]() - - [Color Pickers]() - - [Disclose]() - - [Input]() - - [Label]() - - [ProgressBar]() - - [Radio]() - - [Scroll]() - - [Select]() - - [Slider]() + - [Button](./widgets/controls/button.md) + - [Checkbox](./widgets/controls/checkbox.md) + - [Radio](./widgets/controls/radio.md) + - [Select](./widgets/controls/select.md) + - [Canvas](./widgets/controls/canvas.md) + - [Color Pickers](./widgets/controls/color-pickers.md) + - [Delimiter](./widgets/controls/delimiter.md) - [Space](./widgets/controls/space.md) - [Switcher]() - [Image]() diff --git a/guide/src/widgets/controls/button.md b/guide/src/widgets/controls/button.md new file mode 100644 index 0000000..12e6e6e --- /dev/null +++ b/guide/src/widgets/controls/button.md @@ -0,0 +1,12 @@ +# Button + +The [`Button`][button] widget is an interactive widget that offers an `on_click` +callback when it is pressed. It has multiple visual styles, allowing it to be +used as a basis of many button-like widgets. The built-in widgets that utilize a +`Button` to create a specialized button type are: + +- [Checkbox](./checkbox.md) +- [Radio](./radio.md) +- [Select](./select.md) + +[button]: <{{ docs }}/widgets/button/struct.Button.html> diff --git a/guide/src/widgets/controls/canvas.md b/guide/src/widgets/controls/canvas.md new file mode 100644 index 0000000..f417c36 --- /dev/null +++ b/guide/src/widgets/controls/canvas.md @@ -0,0 +1,13 @@ +# Canvas + +The [`Canvas`][canvas] widget invokes a function each time it needs to paint. +This function has access to a graphics context exposing most of +[Kludine][kludgine]'s 2D graphics API. + +A [`Tick`][tick] can be attached to the `Canvas` to have a callback invoked at a +steady rate. This tick function can be used to update the state of the `Canvas`, +and it can signal when the `Canvas` should be redrawn. + +[canvas]: <{{ docs }}/widgets/struct.Canvas.html> +[tick]: <{{ docs }}/struct.Tick.html> +[kludgine]: diff --git a/guide/src/widgets/controls/checkbox.md b/guide/src/widgets/controls/checkbox.md new file mode 100644 index 0000000..8866ff2 --- /dev/null +++ b/guide/src/widgets/controls/checkbox.md @@ -0,0 +1,14 @@ +# Checkbox + +The [`Checkbox`][checkbox] widget is a [`Button`](./button.md) that toggles a +[`CheckboxState`][checkboxstate] when clicked. + +[`CheckboxState`][checkboxstate] contains three variants: + +- Indeterminant: A horizontal line will be drawn in the box to show a state of + neither checked or unchecked. +- Checked: A checkbark will be drawn in the box. +- Unchecked: No indicator will be drawn in the box. + +[checkbox]: <{{ docs }}/widgets/checkbox/struct.Checkbox.html> +[checkboxstate]: <{{ docs }}/widgets/checkbox/struct.CheckboxState.html> diff --git a/guide/src/widgets/controls/color-pickers.md b/guide/src/widgets/controls/color-pickers.md new file mode 100644 index 0000000..8f3be40 --- /dev/null +++ b/guide/src/widgets/controls/color-pickers.md @@ -0,0 +1,18 @@ +# Color Pickers + +A variety of building blocks are available to offer interfaces selecting colors +in both RGB and HSL color spaces. + +- [`RgbPicker`][rgb]: Shows 3 `ComponentPicker`s for red, green, and blue. +- [`RgbaPicker`][rgba]: Shows 4 `ComponentPicker`s for red, green, blue, and alpha. +- [`HslPicker`][hsl]: Shows 3 `ComponentPicker`s for hue, saturation, and lightness. +- [`HslaPicker`][hsla]: Shows 4 `ComponentPicker`s for hue, saturation, lightness, and alpha. +- [`ComponentPicker`][component]: Shows a gradient in a bar and allows + selecting a single [`ColorComponent`][colorcomponent]. + +[rgb]: <{{ docs }}/widgets/color/struct.RgbPicker.html> +[rgba]: <{{ docs }}/widgets/color/struct.RgbaPicker.html> +[hsl]: <{{ docs }}/widgets/color/struct.HslPicker.html> +[hsla]: <{{ docs }}/widgets/color/struct.HslaPicker.html> +[component]: <{{ docs }}/widgets/color/struct.ComponentPicker.html> +[colorcomponent]: <{{ docs }}/widgets/color/trait.ColorComponent.html> diff --git a/guide/src/widgets/controls/delimiter.md b/guide/src/widgets/controls/delimiter.md new file mode 100644 index 0000000..43b3d4a --- /dev/null +++ b/guide/src/widgets/controls/delimiter.md @@ -0,0 +1,6 @@ +# Delimiter + +The [`Delimiter`][delimiter] widget is used to draw a horizontal or vertical +delimiter. This widget is similar to HTML's `
` tag. + +[delimiter]: <{{ docs }}/widgets/struct.Delimiter.html> diff --git a/guide/src/widgets/controls/radio.md b/guide/src/widgets/controls/radio.md new file mode 100644 index 0000000..0f65c6c --- /dev/null +++ b/guide/src/widgets/controls/radio.md @@ -0,0 +1,8 @@ +# Radio + +The [`Radio`][radio] widget is a [`Button`](./button.md) that shows a circular +indicator when a [`Dynamic`][dynamic] contains the radio's associated value. +When clicked, the `Dynamic` is updated to the radio's associated value. + +[radio]: <{{ docs }}/widgets/radio/struct.Radio.html> +[dynamic]: <{{docs}}/value/struct.Dynamic.html> diff --git a/guide/src/widgets/controls/select.md b/guide/src/widgets/controls/select.md new file mode 100644 index 0000000..a6f51c4 --- /dev/null +++ b/guide/src/widgets/controls/select.md @@ -0,0 +1,9 @@ +# Select + +The [`Select`][select] widget is a [`Button`](./button.md) that becomes +highlighted when a [`Dynamic`][dynamic] contains the select's associated +value. When clicked, the `Dynamic` is updated to the select's associated +value. + +[select]: <{{ docs }}/widgets/select/struct.Select.html> +[dynamic]: <{{docs}}/value/struct.Dynamic.html> diff --git a/guide/src/widgets/layout/list.md b/guide/src/widgets/layout/list.md new file mode 100644 index 0000000..2f162d8 --- /dev/null +++ b/guide/src/widgets/layout/list.md @@ -0,0 +1,13 @@ +# List + +The [`List`][list] widget lays a set of [`WidgetList`][children] as a list of +items with an optional indicator. It creates lists in a similar fashion to +HTML's `
    ` and `
      ` tags. + +A [`ListStyle`][liststyle] controls the indicator and whether a [trailing +delimiter][trailingdelimiter] is shown next to the indicator. + +[list]: <{{ docs }}/widgets/list/struct.List.html> +[children]: <{{ docs }}/widget/struct.WidgetList.html> +[liststyle]: <{{ docs }}/widgets/list/enum.ListStyle.html> +[trailingdelimiter]: <{{ docs }}/widgets/list/struct.TrailingDelimiter.html>