Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Add Chips component #74

Closed
ajoslin opened this issue Jul 9, 2014 · 4 comments
Closed

Add Chips component #74

ajoslin opened this issue Jul 9, 2014 · 4 comments
Assignees
Labels
a11y This issue is related to accessibility type: feature
Milestone

Comments

@ajoslin
Copy link
Contributor

ajoslin commented Jul 9, 2014

Specification: Chips

image

<material-chips>
  <material-chip ng-repeat="contact in contacts" active="contact.selected">
    <img ng-src="{{contact.img}}">
    <h2>{{contact.name}}</h2>
    <p>{{contact.email}}</p>
  </material-chip>
</material-chips>

Considerations:

  • All chips inside are available in the menu.
  • All chips that evaluate to active true will be rendered.
@ajoslin ajoslin modified the milestone: 0.0.1 Release Jul 9, 2014
@ThomasBurleson ThomasBurleson added this to the 0.0.4 milestone Aug 27, 2014
@ThomasBurleson ThomasBurleson changed the title feat(chip): add chips Add Chips component Aug 27, 2014
@ajoslin ajoslin modified the milestones: 0.0.4, 0.0.5 Sep 22, 2014
@ThomasBurleson ThomasBurleson modified the milestones: 0.6, 0.5 Oct 14, 2014
@ThomasBurleson ThomasBurleson modified the milestones: 0.9.0-rc1, 0.6.0-rc1 Nov 18, 2014
@ThomasBurleson ThomasBurleson modified the milestones: 0.9.0, 0.8.0 Jan 30, 2015
@robertmesserle robertmesserle modified the milestones: 0.8.0-rc1, 0.9.0 Feb 2, 2015
@Hendrixer
Copy link

what about the action for the x?
There would be two solutions I can think of:

  1. Allow devs to use whatever icon they want for the action on the right if so then this could work
 <material-chips>
  <material-chip ng-repeat="contact in contacts" active="contact.selected">
    <img ng-src="{{contact.img}}">
    <h2>{{contact.name}}</h2>
    <p>{{contact.email}}</p>
    <md-icon class="md-chip-action" md-svg-icon="icon"  ng-click="action($index)"><md-icon>
  </material-chip>
</material-chips>
  1. place an action directive on the material-chip directive
 <material-chips>
  <material-chip ng-repeat="contact in contacts" active="contact.selected"
   material-chip-action="action($index)">
    <img ng-src="{{contact.img}}">
    <h2>{{contact.name}}</h2>
    <p>{{contact.email}}</p>
  </material-chip>
</material-chips>

What do you think @ajoslin ?

@jeroenvheel
Copy link

when you delete a item its not the item that is deleted.

example: Basic usage
when you click delete[X] on (fruit:orange).
(fruit: apple) got deleted

@lyschoening
Copy link

Along the same lines (not making a new issue since this one is still open): If you re-enter an existing chip, all further chips entered after it will not show up until that chip is deleted.

  1. add 'foo' (this works)
  2. add 'foo' again (nothing happens)
  3. add a few other chips (nothing happens)
  4. delete 'foo': The second 'foo' as well as all other new chips appear.

@jeroenvheel
Copy link

nice works like a charm !

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y This issue is related to accessibility type: feature
Projects
None yet
Development

No branches or pull requests

7 participants