Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(select): Hugely simplify HTML select definitions #225

Open
wants to merge 5 commits into
base: v0.10.0
Choose a base branch
from

Conversation

edcarroll
Copy link
Owner

PR is WIP

This PR is aiming to address #134. It introduces a new way of defining a select, namely:

<sui-select [options]="[1,2,3]"></sui-select>

It is no longer required for you to have to write the *ngFor manually.

However, this doesn't eliminate the ability to specify more complex markup within the select. For example, adding a header to a select is done like so:

<sui-select [options]="[1,2,3]">
    <div class="header">
        <i class="tags icon"></i>
        Filter by tag
    </div>
</sui-select>

The results are rendered at the bottom.

However, if your markup is more complex still, you can manually specify the entry point for the options, like so:

<sui-select [options]="[1,2,3]">
    <div class="ui icon search input">
        <i class="search icon"></i>
        <input suiSelectSearch type="text" placeholder="Search options...">
    </div>
    <div class="divider"></div>
    <div class="header">
        <i class="list icon"></i>
        Options
    </div>
    <div class="scrolling menu">
        <sui-select-options></sui-select-options>
    </div>
</sui-select>

Finally, if you want to manually specify the options, you can still do so by simply putting:

<sui-select>
    <sui-select-option option="Option 1"></sui-select-option>
    <sui-select-option option="Option 2"></sui-select-option>
    <sui-select-option option="Option 3"></sui-select-option>
    <sui-select-option option="Option 4"></sui-select-option>
</sui-select>

Note that value has been renamed to option, as this makes it a bit more clear.

@edcarroll
Copy link
Owner Author

@trevordaniels this is a first attempt at what we discussed in #134. What are your thoughts on this way of doing things?

Unfortunately I haven't yet found a way to simplify the options template any further than currently, though I'm still investigating.

@edcarroll edcarroll changed the base branch from master to v0.10.0 August 11, 2017 02:22
@edcarroll edcarroll modified the milestones: Needs Milestone, 0.10.0 Aug 11, 2017
@curronieto
Copy link

I don't know if in this new version it's allowed to search on properties of embedded objects of options, like: labelField = "object.property" (in 0.9.6 is giving an error).

@jmls
Copy link

jmls commented Oct 19, 2017

this would be useful - any chance of getting it merged ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants