How to use UUI in my custom packages?

Questions
1

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?

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

Hi, i use UUI lib a lot in my MediaTools Package you could look there for reference. If that would help you

You can find UUI stuff in the assets directory.

1 Like
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>
5

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?

6

Hi

I’m using angular on this. I don’t think I can use lit?

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