Imported from f846548960
This commit is contained in:
Nigel Breslaw 2025-06-26 12:12:17 +03:00 committed by Olivier Goffart
parent 0ce02e0f04
commit 18749b3206
24 changed files with 127 additions and 67 deletions

View file

@ -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.
[![Build status](https://github.com/slint-ui/material-components/actions/workflows/autofix.yaml/badge.svg)](https://github.com/slint-ui/material-components/actions/workflows/autofix.yaml)
[![REUSE status](https://api.reuse.software/badge/github.com/slint-ui/material-components)](https://api.reuse.software/info/github.com/slint-ui/slint)
[![REUSE status](https://api.reuse.software/badge/github.com/slint-ui/material-components)](https://api.reuse.software/info/github.com/slint-ui/material-components)
[![Discussions](https://img.shields.io/github/discussions/slint-ui/material-components)](https://github.com/slint-ui/material-components/discussions)
## Disclaimer

View file

@ -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" },
{

View file

@ -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);

View file

@ -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.

View file

@ -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

View file

@ -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.

View file

@ -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.

View file

@ -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.

View file

@ -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>

View file

@ -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.

View file

@ -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>

View file

@ -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>

View file

@ -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);
}
}
```

View file

@ -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>

View file

@ -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");
}
}
```

View file

@ -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");
}
}
```

View file

@ -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");
}
}
```

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 />

View file

@ -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>

View file

@ -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":