UX List - Classnames not matching

Help Requests
1

Hi all - I’m struggling with getting one of the UX List components to render. I see in the style sheet, there’s a class ux-list-item__secondary-content but in the docs the page shows secondary for the styles.

So I guess I’m probably missing something but I’m not sure what. Maybe I missed some configuration somewhere for the theme or css variables or something.

here’s what I’ve done:

// from main.ts
    .plugin(PLATFORM.moduleName('@aurelia-ux/list'))

<!-- from component.html -->

      <ux-card>
        <ux-list type="two-line">
          <ux-list-item repeat.for="project of projects">
            <div class="list-content">
              <span>${project.project_name}</span>
              <div class="secondary">${project.location}</div>
            </div>
          </ux-list-item>
          <ux-list-item>
            List Item 2
          </ux-list-item>
        </ux-list>
      </ux-card>

And the list shows up very plain (not like the docs) like this:
image

Can anyone provide me with some tips on getting this working?

Edit 1: Here’s an example:

1 Like
2

Is this what you want https://gist.dumber.app/?gist=fcc36ca0a532c8a8cae721128739a092

3

Yep - after diving into the css a bit I found that worked for me as well. I just wasn’t sure if there was some “magic” in the css theming that is supposed to automatically convert the classes from what the docs were showing on the list docs.

So this might be something to fix in the UX either documentation or the code itself? I’d be happy to contribute if so.

Regarding UI/UX - my team is moving forward with a new project with Aurelia - so a general question for the community would be what UI framework would be a good place to start with? What do people typically recommend?

1 Like
4

We’ve had a several discussion about a UI framework for Aurelia. It’s never been one that get voted the most, probably depends on what you like.
@ben-girardet and @MaximBalaganskiy recently have been using UX extensively in their projects, let’s invite them to the chat.

5

@roemhildtg if you’re a Material Design fan - Google MDC bridge or UX. I’m obviously biased towards the bridge - you get the “true” Material Design from Google itself.

2 Likes
6

Awesome - thanks for the suggestion! I’ll take a look at both and give them a shot.

1 Like