Hi all
I’m hoping someone can help as the articles don’t seem to help @storybook/core - Storybook
I’m trying to use multiple controls in my package with this select
bring one of them.
I can get other simple controls working but for controls that required a bit more setup like this one I can get it to display but can’t get it to show items in the select?
Does anyone have an example I can use?
Rockerby
(Richard Ockerby)
April 8, 2025, 5:00pm
2
Shooting from the hip here, but have you tried something like:
<uui-select placeholder="Select an option"
options=“[
{ name: 'Carrot', value: 'orange' },
{ name: 'Cucumber', value: 'green' },
{ name: 'Aubergine', value: 'purple' },
{ name: 'Blueberry', value: 'Blue' },
{ name: 'Banana', value: 'yellow' },
{ name: 'Strawberry', value: 'red' },
]”></uui-select>
Fric-88
(David Jazbec)
April 8, 2025, 5:54pm
3
Hi, i use UUI lib a lot in my MediaTools Package you could look there for reference. If that would help you
Umbraco 14+ package
You can find UUI stuff in the assets directory.
1 Like
Fric-88
(David Jazbec)
April 8, 2025, 6:27pm
4
But specifically for uui-select, you could do it like this:
Declare your Options Array anywhere in your lit element.
#resolutionOptions: Array<Option> = [
{ name: "All", value: "AllSizes", selected: true },
{ name: "Bigger than", value: 'BiggerThan' },
{ name: "Smaller than", value: 'SmallerThan' },
];
And then use it in your uui-select (mind the dot before options)
<uui-select
label="Select resolution filter"
placeholder="Select an option"
.options="${this.#resolutionOptions}"
@change="${this.resolutionFilterChanged}">
</uui-select>
Hi that was exactly what I did and never worked. The select was showing but no items? I followed the tutorial but I’m not sure if I missed anything?
Hi
I’m using angular on this. I don’t think I can use lit?
Fric-88
(David Jazbec)
April 8, 2025, 7:13pm
7
Oh, ok. You can still use UII with AngularJS if that is what you mean?
I tried to cobble some things together with it, you can check it out here:
Badgernet.Umbraco.WebPicAuto/Badgernet.Umbraco.WebPicAuto/App_Plugins/Badgernet.Umbraco.WebPicAuto/Backoffice at master · Fric-88/Badgernet.Umbraco.WebPicAuto
I dont think there is a select in there, but some uui-input and uui-toggle elements if that helps.
<uui-toggle label ="converter toggler"
ng-on-change="toggle('WpaEnableConverting')"
ng-attr-checked="{{vm.settings.WpaEnableConverting ? 'checked' : undefined}}">
</uui-toggle>
1 Like
LuukPeters
(Luuk Peters (Proud Nerds))
April 9, 2025, 6:01am
8
It can work with angular, but that very old angular version doesnt really understand web components. I would use the simple uui components, like toggle and textbox, but for uui-select, I would usually just use a select so I didnt have to go through all kinds of loops to get it to work.