-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6d57496
commit e0f1484
Showing
17 changed files
with
350 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| # SSlider | ||
| The Slider component is used for creating a slider control that allows users to select a value within a range. It supports customization of orientation, theme, and visual properties. | ||
|
|
||
|  | ||
| ## example | ||
| ```rust | ||
| import {SSlider, SButton} from "../../index.slint"; | ||
|
|
||
|
|
||
| component TestSlider inherits Window{ | ||
| height: 400px; | ||
| width: 400px; | ||
| VerticalLayout { | ||
| spacing: 20px; | ||
| padding: 20px; | ||
| SSlider { | ||
| theme: Light; | ||
| width: 360px; | ||
| height: 40px; | ||
| stroke-width: 16px; | ||
| progress: 0.3; | ||
| } | ||
| SSlider { | ||
| width: 360px; | ||
| height: 40px; | ||
| progress: 80%; | ||
| } | ||
|
|
||
| HorizontalLayout { | ||
| spacing: 30px; | ||
| slider:= SSlider { | ||
| theme: Success; | ||
| width: 30px; | ||
| height: 220px; | ||
| stroke-width: 220px; | ||
| progress: 30%; | ||
| orientation: Orientation.vertical; | ||
| moved(progress) => { | ||
| debug(progress); | ||
| } | ||
| } | ||
| VerticalLayout { | ||
| spacing: 20px; | ||
| HorizontalLayout { | ||
| spacing: 20px; | ||
| SButton{ | ||
| text: "set"; | ||
| clicked => { | ||
| slider.set(0.45); | ||
| } | ||
| } | ||
| SButton{ | ||
| text: "add"; | ||
| clicked => { | ||
| slider.add(0.1); | ||
| } | ||
| } | ||
| } | ||
| HorizontalLayout { | ||
| spacing: 20px; | ||
| SButton{ | ||
| text: "sub"; | ||
| clicked => { | ||
| slider.sub(0.1); | ||
| } | ||
| } | ||
| SButton{ | ||
| text: "full"; | ||
| clicked => { | ||
| slider.full(); | ||
| } | ||
| } | ||
| SButton{ | ||
| text: "clear"; | ||
| clicked => { | ||
| slider.clear(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## properties | ||
| - `in property <Orientation> orientation` : Sets the orientation of the slider. | ||
| - `in property <Themes> theme` : Sets the theme of the slider. | ||
| - `in-out property <float> progress` : Controls the progress value of the slider. | ||
| - `in-out property <length> stroke-width` : Sets the stroke width of the slider. | ||
| - `in-out property <brush> stroke-color` : Sets the stroke color of the slider. | ||
| - `in property <length> border-radius` : Sets the border radius of the slider bar, linked to bar.border-radius. | ||
| ## functions | ||
| - `public function set(progress: float)` : Sets the slider progress to a specific value and triggers the moved callback. | ||
| - `public function add(len: float)` : Increases the slider progress by a specified value and triggers the moved callback. | ||
| - `public function sub(len: float)` : Decreases the slider progress by a specified value and triggers the moved callback. | ||
| - `public function full()` : Sets the slider progress to 1 (full) and triggers the moved callback. | ||
| - `public function clear()` : Sets the slider progress to 0 (empty) and triggers the moved callback. | ||
| ## callbacks | ||
| - `callback moved(float)` : Triggered when the slider is moved, passing the current progress value as a float. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| # SCatalog | ||
|
|
||
| The Catalog component is used to display a series of catalog items, each of which can contain labels and icons, and has click interaction functionality. | ||
|
|
||
|  | ||
|
|
||
| ## example | ||
|
|
||
| ```rust | ||
| import {SCatalog} from "../../index.slint"; | ||
| import { CatalogItem, UseIcons } from "../../use/index.slint"; | ||
| component TestCatalog inherits Window{ | ||
| height: 480px; | ||
| width: 400px; | ||
| in property <CatalogItem> base: { | ||
| left-icon: UseIcons.icons.Attention, | ||
| show-left-icon: true, | ||
| label: "Attention", | ||
| show-label: true, | ||
| value: "8uyf23rfgd", | ||
| right-icon: UseIcons.icons.Right, | ||
| show-right-icon: true, | ||
| align: LayoutAlignment.space-between, | ||
| }; | ||
|
|
||
| VerticalLayout { | ||
| spacing: 10px; | ||
| SCatalog { | ||
| height: self.real-height; | ||
| items: [ | ||
| { | ||
| left-icon: UseIcons.icons.Attention, | ||
| show-left-icon: true, | ||
| label: "Attention", | ||
| show-label: true, | ||
| value: "8uyf23rfgd", | ||
| right-icon: UseIcons.icons.Right, | ||
| show-right-icon: true, | ||
| align: LayoutAlignment.space-between, | ||
| }, | ||
| { | ||
| left-icon: UseIcons.icons.Help, | ||
| show-left-icon: true, | ||
| label: "Help", | ||
| show-label: true, | ||
| value: "8uyf23rfgd1", | ||
| right-icon: UseIcons.icons.Right, | ||
| show-right-icon: true, | ||
| align: LayoutAlignment.space-between, | ||
| }, | ||
| { | ||
| left-icon: UseIcons.icons.More, | ||
| show-left-icon: true, | ||
| label: "More", | ||
| show-label: true, | ||
| value: "8uyf23rfgd2", | ||
| right-icon: UseIcons.icons.Right, | ||
| show-right-icon: true, | ||
| align: LayoutAlignment.space-between, | ||
| } | ||
| ]; | ||
| } | ||
| SCatalog { | ||
| theme: Primary; | ||
| height: self.real-height; | ||
| items: [ | ||
| base, | ||
| { | ||
| left-icon: UseIcons.icons.Folder-filled, | ||
| show-left-icon: true, | ||
| label: "Folder", | ||
| show-label: true, | ||
| value: "8uyf23rfgd2", | ||
| right-icon: UseIcons.icons.Right, | ||
| show-right-icon: false, | ||
| align: LayoutAlignment.center, | ||
| }, | ||
| base, | ||
| base, | ||
| { | ||
| left-icon: UseIcons.icons.More, | ||
| show-left-icon: true, | ||
| label: "More", | ||
| show-label: false, | ||
| value: "8uyf23rfgd2", | ||
| right-icon: UseIcons.icons.Right, | ||
| show-right-icon: true, | ||
| align: LayoutAlignment.space-between, | ||
| }, | ||
| base, | ||
| ]; | ||
| clicked(index, item) => { | ||
| debug(index); | ||
| debug(item.value); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## properties | ||
| - `in property <PaddingType> padding-type` : catalog padding type | ||
| - `in property <Themes> theme` : SurrealismUI theme | ||
| - `in property <[CatalogItem]> items` : catalog items see `CatalogItem` | ||
| - `in property <length> font-size` : catalog label font size, which affect the height of the catalog item | ||
| - `in property <int> font-wight` : catalog label font weight | ||
| - `in property <string> font-family` : catalog label font family | ||
| - `in property <bool> font-italic` : catalog label font italic | ||
| - `in property <length> spacing` : spacing between left icon and label | ||
| - `in property <brush> active-color` : catalog item active color | ||
| - `out property <length> real-height` : real height of the catalog, you can use it to set the height of the catalog (recommend) | ||
| - `in-out property <length> item-height` : height of the catalog item | ||
| ## functions | ||
| - `pure function has-active(hover: bool, pressed: bool) -> bool` : judge whether the catalog item is active | ||
| ## callbacks | ||
| - `callback clicked(int, CatalogItem)`: click event callback, return the index of the clicked item and the item object |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| # Examples (comming soon) | ||
|
|
||
| - How to inherits SurrealismUI Widget | ||
| - Outlook (use SurrealismUI build Outlook email platform) |
Oops, something went wrong.