material: base setup components import

[FloVanGH]

This is first minimal setup to give access to the headless and material component library

Example

import { FilledButton } from "@slint/material.slint";
import { ButtonBase } from "@slint/headless.slint;

This should also be the base setup to start with the material FilledButton.

What is missing is lsp support. This will follow in a separate pr.

[FloVanGH]

I thought a liitle bit about this stuff. Maybe it makes sense to have a separate library import hashmap for the slint components. So sperate this one from the ones that can be set by the developer. Maybe also in a followup PR.

[tronical]

I thought a liitle bit about this stuff. Maybe it makes sense to have a separate library import hashmap for the slint components. So sperate this one from the ones that can be set by the developer. Maybe also in a followup PR.

Yep. If you do that in this PR, then you can also un-do the node.js changes right away.

[FloVanGH]

I close this issue, because the material component set will be done as separate package in a separate repo.

[srfsh]

I close this issue, because the material component set will be done as separate package in a separate repo.

When will that be made public?

[tronical]

You can follow the development here:

https://github.com/slint-ui/slint/tree/feature/material/component-sets/material

:-)

[srfsh]

You can follow the development here:

https://github.com/slint-ui/slint/tree/feature/material/component-sets/material

:-)

It is certainly a great relief that I don't have to implement all of this on my own. Many thanks for taking up the task. I can't express my appreciation enough as I had struggled quite a bit due to the uncertain specs and inaccessibility of the tokens and such.

Feel free to tell me to convert my following question into an issue here: Given the SearchBar component, how can I get access to its has-focus so that I can remove the padding that I set around its surrounding? Basically what I have is the following, but s does not have has-focus:

HorizontalLayout {
    padding: 16px;
    s := SearchBar {}
    states [
        focus when s.has-focus: {
            padding: 0;
        }
    ]
}

From what I can get, given my current understanding of Slint, I would somehow need that has-focus on the input child to be propagated up to its root in order for me to have a property like has-focus. Feel more than welcome to correct me on this one as well. I think there might be something related to forward-focus that I am not grasping, and one might not need to create such wrapper properties as mentioned.

Again, many, many thanks!

[FloVanGH]

You can follow the development here: https://github.com/slint-ui/slint/tree/feature/material/component-sets/material :-)

It is certainly a great relief that I don't have to implement all of this on my own. Many thanks for taking up the task. I can't express my appreciation enough as I had struggled quite a bit due to the uncertain specs and inaccessibility of the tokens and such.

Feel free to tell me to convert my following question into an issue here: Given the SearchBar component, how can I get access to its has-focus so that I can remove the padding that I set around its surrounding? Basically what I have is the following, but s does not have has-focus:

HorizontalLayout {
    padding: 16px;
    s := SearchBar {}
    states [
        focus when s.has-focus: {
            padding: 0;
        }
    ]
}

From what I can get, given my current understanding of Slint, I would somehow need that has-focus on the input child to be propagated up to its root in order for me to have a property like has-focus. Feel more than welcome to correct me on this one as well. I think there might be something related to forward-focus that I am not grasping, and one might not need to create such wrapper properties as mentioned.

Again, many, many thanks!

You're welcome :-). The SearchBar does not have yet a has-focus property but I see no reason to add it. I let you know as soon as it is in. If you need the values of spaces and padding that are defined for material you find most of them in import { MaterialStyleMetrics } from "{your_path}/material.slint";

If you are interested what my workflow is to implement the material components.

• First I check the specs on the official figma file: https://www.figma.com/community/file/1035203688168086460
• Then I check also the official documentation of the component: https://m3.material.io/components
• As last I compare the look and feel with the flutter m3 gallery: https://flutter.github.io/samples/web/material_3_demo/