mirror of
https://github.com/slint-ui/slint.git
synced 2025-11-01 20:31:27 +00:00
material: Fix missing defaults and links (https://github.com/slint-ui/material-components/issues/47)
Imported from f846548960
This commit is contained in:
parent
0ce02e0f04
commit
18749b3206
24 changed files with 127 additions and 67 deletions
|
|
@ -7,7 +7,7 @@ The components are intended to use for development of user interfaces with Slint
|
|||
Contributions and feedback from the community are welcome.
|
||||
|
||||
[](https://github.com/slint-ui/material-components/actions/workflows/autofix.yaml)
|
||||
[](https://api.reuse.software/info/github.com/slint-ui/slint)
|
||||
[](https://api.reuse.software/info/github.com/slint-ui/material-components)
|
||||
[](https://github.com/slint-ui/material-components/discussions)
|
||||
|
||||
## Disclaimer
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default defineConfig({
|
|||
{
|
||||
icon: "github",
|
||||
label: "GitHub",
|
||||
href: "https://github.com/slint-ui/slint",
|
||||
href: "https://github.com/slint-ui/material-components",
|
||||
},
|
||||
{ icon: "x.com", label: "X", href: "https://x.com/slint_ui" },
|
||||
{
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ if (propName === "") {
|
|||
console.error("No propName!!");
|
||||
}
|
||||
|
||||
let fullTypeName = typeName;
|
||||
let fullTypeName: string = typeName;
|
||||
|
||||
if (typeName === "enum") {
|
||||
if (enumName === undefined || enumName === "") {
|
||||
|
|
@ -47,6 +47,12 @@ if (typeName === "enum") {
|
|||
} else {
|
||||
fullTypeName = typeName.toString() + " " + structName!.toString();
|
||||
}
|
||||
} else if (typeName === "[struct]") {
|
||||
if (structName === undefined || structName === "") {
|
||||
console.error("array of struct type without a structName:", propName);
|
||||
} else {
|
||||
fullTypeName = `[${typeName.toString().replace("[", "").replace("]", "")} ${structName.toString()}]`;
|
||||
}
|
||||
} else {
|
||||
if (enumName && enumName !== "") {
|
||||
console.error("Non-enum type with an enumName set:", propName);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: LayoutAlignment
|
||||
description: LayoutAlignment content
|
||||
---
|
||||
|
||||
|
||||
`LayoutAlignment`
|
||||
|
||||
Enum representing the `alignment` property of a layout
|
||||
|
||||
* **`stretch`**: Use the minimum size of all elements in a layout, distribute remaining space based on `*-stretch` among all elements.
|
||||
* **`center`**: Use the preferred size for all elements, distribute remaining space evenly before the first and after the last element.
|
||||
* **`start`**: Use the preferred size for all elements, put remaining space after the last element.
|
||||
* **`end`**: Use the preferred size for all elements, put remaining space before the first element.
|
||||
* **`space-between`**: Use the preferred size for all elements, distribute remaining space evenly between elements.
|
||||
* **`space-around`**: Use the preferred size for all elements, distribute remaining space evenly before the first element, after the last element and between elements.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: ScrollBarPolicy
|
||||
description: ScrollBarPolicy content
|
||||
---
|
||||
|
||||
|
||||
`ScrollBarPolicy`
|
||||
|
||||
This enum describes the scrollbar visibility
|
||||
|
||||
* **`as-needed`**: Scrollbar will be visible only when needed
|
||||
* **`always-off`**: Scrollbar never shown
|
||||
* **`always-on`**: Scrollbar always visible
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: ListItem
|
||||
description: ListItem content
|
||||
---
|
||||
|
||||
`ListItem`
|
||||
|
||||
This structure represents a ListItem with a text, supporting text, avatar icon, avatar text, avatar background, avatar foreground, and action icon.
|
||||
|
||||
- **`text`** (_string_): The text to display in the item.
|
||||
- **`supporting_text`** (_string_): The supporting text to display in the item.
|
||||
- **`avatar_icon`** (_image_): The avatar icon to display in the item.
|
||||
- **`avatar_text`** (_string_): The avatar text to display in the item.
|
||||
- **`avatar_background`** (_color_): The avatar background color to display in the item.
|
||||
- **`avatar_foreground`** (_color_): The avatar foreground color to display in the item.
|
||||
- **`action_icon`** (_image_): The action icon to display in the item.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: NavigationGroup
|
||||
description: NavigationGroup content
|
||||
---
|
||||
|
||||
`NavigationGroup`
|
||||
|
||||
This structure represents a NavigationGroup with a title and items.
|
||||
|
||||
- **`title`** (_string_): The title of the group.
|
||||
- **`items`** (_[NavigationItem]_): The items of the group.
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
title: Navigation Item
|
||||
description: NavigationItem content
|
||||
---
|
||||
|
||||
`NavigationItem`
|
||||
|
||||
This structure represents a NavigationItem with an icon, text, badge, and empty badge.
|
||||
|
||||
- **`icon`** (_image_): The icon to display in the item.
|
||||
- **`icon_selected`** (_image_): The icon to display in the item when selected.
|
||||
- **`text`** (_string_): The text to display in the item.
|
||||
- **`empty_badge`** (_bool_): Whether the badge is empty.
|
||||
- **`badge`** (_string_): The badge to display in the item.
|
||||
|
|
@ -33,7 +33,7 @@ Whether to use the container background color instead of the surface color.
|
|||
</SlintProperty>
|
||||
|
||||
### leading_icon
|
||||
<SlintProperty propName="leading_icon" typeName="IconButtonItem">
|
||||
<SlintProperty propName="leading_icon" typeName="struct" structName="IconButtonItem">
|
||||
An icon button item displayed at the start of the app bar, typically used for navigation.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ The title text displayed in the app bar.
|
|||
</SlintProperty>
|
||||
|
||||
### trailing_icon
|
||||
<SlintProperty propName="trailing_icon" typeName="IconButtonItem">
|
||||
<SlintProperty propName="trailing_icon" typeName="struct" structName="IconButtonItem">
|
||||
An icon button item displayed at the end of the app bar, typically used for actions.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ The icon for the floating action button.
|
|||
</SlintProperty>
|
||||
|
||||
### icon_buttons
|
||||
<SlintProperty propName="icon_buttons" typeName="[IconButtonItem]">
|
||||
<SlintProperty propName="icon_buttons" typeName="[struct]" structName="IconButtonItem">
|
||||
An array of icon button items to display in the bar.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -46,13 +46,6 @@ An array of icon button items to display in the bar.
|
|||
### fab_clicked()
|
||||
Invoked when the floating action button is clicked.
|
||||
|
||||
```slint {2-4}
|
||||
BottomAppBar {
|
||||
fab_clicked() => {
|
||||
debug("FAB clicked");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### icon_button_clicked(index: int)
|
||||
Invoked when an icon button is clicked.
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Whether to use the container background color instead of the surface color.
|
|||
</SlintProperty>
|
||||
|
||||
### leading_icon
|
||||
<SlintProperty propName="leading_icon" typeName="IconButtonItem">
|
||||
<SlintProperty propName="leading_icon" typeName="struct" structName="IconButtonItem">
|
||||
An icon button item displayed at the start of the app bar, typically used for navigation.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ The title text displayed in the app bar.
|
|||
</SlintProperty>
|
||||
|
||||
### trailing_icons
|
||||
<SlintProperty propName="trailing_icons" typeName="[IconButtonItem]">
|
||||
<SlintProperty propName="trailing_icons" typeName="[struct]" structName="IconButtonItem">
|
||||
An array of icon button items displayed at the end of the app bar, typically used for actions.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ NavigationBar {
|
|||
</SlintProperty>
|
||||
|
||||
### items
|
||||
<SlintProperty propName="items" typeName="[NavigationItem]">
|
||||
<SlintProperty propName="items" typeName="[struct]" structName="NavigationItem">
|
||||
An array of navigation items to display in the bar.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ The index of the currently selected navigation item within the current group.
|
|||
</SlintProperty>
|
||||
|
||||
### groups
|
||||
<SlintProperty propName="groups" typeName="[NavigationGroup]">
|
||||
<SlintProperty propName="groups" typeName="[struct]" structName="NavigationGroup">
|
||||
An array of navigation groups, each containing a title and navigation items.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -54,11 +54,3 @@ An array of navigation groups, each containing a title and navigation items.
|
|||
|
||||
### select(group_index: int, item_index: int)
|
||||
Selects the navigation item at the specified group and item indices.
|
||||
|
||||
```slint {2-4}
|
||||
NavigationDrawer {
|
||||
clicked() => {
|
||||
self.select(0, 1);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -31,7 +31,7 @@ A `NavigationRail` is a vertical navigation component that displays navigation i
|
|||
## Properties
|
||||
|
||||
### alignment
|
||||
<SlintProperty propName="alignment" typeName="LayoutAlignment">
|
||||
<SlintProperty propName="alignment" typeName="enum" enumName="LayoutAlignment">
|
||||
The alignment of the navigation items within the rail.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ Whether to show a menu button at the top of the rail.
|
|||
</SlintProperty>
|
||||
|
||||
### items
|
||||
<SlintProperty propName="items" typeName="[NavigationItem]">
|
||||
<SlintProperty propName="items" typeName="[struct]" structName="NavigationItem">
|
||||
An array of navigation items to display in the rail.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -51,11 +51,3 @@ A tooltip text that appears when hovering over the button.
|
|||
|
||||
### clicked()
|
||||
Invoked when the button is clicked.
|
||||
|
||||
```slint {2-4}
|
||||
OutlineButton {
|
||||
clicked() => {
|
||||
debug("Button clicked");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -36,12 +36,3 @@ Whether the card can be clicked and will respond to click events.
|
|||
|
||||
### clicked()
|
||||
Invoked when the card is clicked (only if `clickable` is true).
|
||||
|
||||
```slint {2-4}
|
||||
OutlinedCard {
|
||||
clickable: true;
|
||||
clicked() => {
|
||||
debug("Card clicked");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -37,12 +37,12 @@ Whether the scroll view has focus.
|
|||
</SlintProperty>
|
||||
|
||||
### horizontal_scrollbar_policy
|
||||
<SlintProperty propName="horizontal_scrollbar_policy" typeName="ScrollBarPolicy">
|
||||
<SlintProperty propName="horizontal_scrollbar_policy" typeName="enum" enumName="ScrollBarPolicy">
|
||||
The policy for showing the horizontal scroll bar.
|
||||
</SlintProperty>
|
||||
|
||||
### vertical_scrollbar_policy
|
||||
<SlintProperty propName="vertical_scrollbar_policy" typeName="ScrollBarPolicy">
|
||||
<SlintProperty propName="vertical_scrollbar_policy" typeName="enum" enumName="ScrollBarPolicy">
|
||||
The policy for showing the vertical scroll bar.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -80,11 +80,3 @@ The width of the visible area.
|
|||
|
||||
### scrolled()
|
||||
Invoked when the content is scrolled.
|
||||
|
||||
```slint {2-4}
|
||||
ScrollView {
|
||||
scrolled() => {
|
||||
debug("Content scrolled");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -48,7 +48,7 @@ Text displayed when there are no search results.
|
|||
</SlintProperty>
|
||||
|
||||
### items
|
||||
<SlintProperty propName="items" typeName="[ListItem]">
|
||||
<SlintProperty propName="items" typeName="[struct]" structName="ListItem">
|
||||
An array of search result items to display.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ The index of the currently selected item.
|
|||
</SlintProperty>
|
||||
|
||||
### model
|
||||
<SlintProperty propName="model" typeName="[SegmentedItem]">
|
||||
<SlintProperty propName="model" typeName="[struct]" structName="SegmentedItem">
|
||||
An array of segmented items, each containing an icon and text.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Whether to use the container background color instead of the surface color.
|
|||
</SlintProperty>
|
||||
|
||||
### leading_icon
|
||||
<SlintProperty propName="leading_icon" typeName="IconButtonItem">
|
||||
<SlintProperty propName="leading_icon" typeName="struct" structName="IconButtonItem">
|
||||
An icon button item displayed at the start of the app bar, typically used for navigation.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ The title text displayed in the app bar.
|
|||
</SlintProperty>
|
||||
|
||||
### trailing_icons
|
||||
<SlintProperty propName="trailing_icons" typeName="[IconButtonItem]">
|
||||
<SlintProperty propName="trailing_icons" typeName="[struct]" structName="IconButtonItem">
|
||||
An array of icon button items displayed at the end of the app bar, typically used for actions.
|
||||
</SlintProperty>
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,6 @@ The index of the currently selected tab.
|
|||
</SlintProperty>
|
||||
|
||||
### items
|
||||
<SlintProperty propName="items" typeName="[NavigationItem]">
|
||||
<SlintProperty propName="items" typeName="[struct]" structName="NavigationItem">
|
||||
An array of tab items to display in the bar.
|
||||
</SlintProperty>
|
||||
|
|
@ -3,19 +3,32 @@
|
|||
title: Global Structs and Enums
|
||||
description: Global Structs and Enums
|
||||
---
|
||||
import IconButtonItem from "../../collections/structs/IconButtonItem.md"
|
||||
import ListItem from "../../collections/structs/ListItem.md"
|
||||
import SegmentedItem from "../../collections/structs/SegmentedItem.md"
|
||||
import Time from "../../collections/structs/Time.md"
|
||||
import NavigationItem from "../../collections/structs/NavigationItem.md"
|
||||
import NavigationGroup from "../../collections/structs/NavigationGroup.md"
|
||||
|
||||
import CheckState from "../../collections/enums/CheckState.md"
|
||||
import FABStyle from "../../collections/enums/FABStyle.md"
|
||||
|
||||
import IconButtonItem from "../../collections/structs/IconButtonItem.md"
|
||||
import SegmentedItem from "../../collections/structs/SegmentedItem.md"
|
||||
import Time from "../../collections/structs/Time.md"
|
||||
import LayoutAlignment from "../../collections/enums/LayoutAlignment.md"
|
||||
import ScrollBarPolicy from "../../collections/enums/ScrollBarPolicy.md"
|
||||
|
||||
## Structs
|
||||
|
||||
### IconButtonItem
|
||||
<IconButtonItem />
|
||||
|
||||
### ListItem
|
||||
<ListItem />
|
||||
|
||||
### NavigationItem
|
||||
<NavigationItem />
|
||||
|
||||
### NavigationGroup
|
||||
<NavigationGroup />
|
||||
|
||||
### SegmentedItem
|
||||
<SegmentedItem />
|
||||
|
||||
|
|
@ -30,4 +43,8 @@ import Time from "../../collections/structs/Time.md"
|
|||
### FABStyle
|
||||
<FABStyle />
|
||||
|
||||
### LayoutAlignment
|
||||
<LayoutAlignment />
|
||||
|
||||
### ScrollBarPolicy
|
||||
<ScrollBarPolicy />
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ const metadata = {
|
|||
image={{ src: '~/assets/images/phone-dark.webp', alt: 'Material Components Hero Image' }}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Slint
|
||||
<span
|
||||
class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent dark:from-cyan-400 dark:via-fuchsia-500 dark:to-yellow-400"
|
||||
>
|
||||
Slint
|
||||
</span>
|
||||
+ Material Design
|
||||
</span>
|
||||
<br/>Start building your next product today
|
||||
</Fragment>
|
||||
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ export type KnownType =
|
|||
| "relative-font-size"
|
||||
| "string"
|
||||
| "struct"
|
||||
| "[struct]"
|
||||
| "IconButtonItem"
|
||||
| "FABStyle"
|
||||
| "SegmentedItem"
|
||||
|
|
@ -174,7 +175,7 @@ export function getTypeInfo(typeName: KnownType): TypeInfo {
|
|||
};
|
||||
case "IconButtonItem":
|
||||
return {
|
||||
href: linkMap.IconButtonItem.href,
|
||||
href: linkMap.StructType.href,
|
||||
defaultValue: "a IconButtonItem with default values",
|
||||
};
|
||||
case "FABStyle":
|
||||
|
|
@ -184,7 +185,7 @@ export function getTypeInfo(typeName: KnownType): TypeInfo {
|
|||
};
|
||||
case "SegmentedItem":
|
||||
return {
|
||||
href: linkMap.SegmentedItem.href,
|
||||
href: linkMap.StructType.href,
|
||||
defaultValue: "a SegmentedItem with default values",
|
||||
};
|
||||
case "Time":
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue