menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Chips
    • choice true/false
      Makes chips selectable
    • filter true/false
      Makes chips multi-selectable
    • input true/false
      Build input chips
  • Chips.Chip
    • no specific props
  • Chips.Icon
    • leading true/false
      Optional. Indicates that it's a leading icon
    • trailing true/false
      Optional. Indicates that it's a trailing icon
  • Chips.Text
    • no specific props
Sample code
import {h, Component} from 'preact';
import Chips from 'preact-material-components/Chips';
import 'preact-material-components/Chips/style.css';
import 'preact-material-components/Theme/style.css';

export default class ChipsPage extends Component {
  render(){
    return (
      <div>
        <Chips>
          <Chips.Chip>
            <Chips.Text>Chip One</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Text>Chip Two</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Text>Chip Three</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Text>Chip Four</Chips.Text>
          </Chips.Chip>
        </Chips>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-chips, you can refer to its documentation here.
Demo
Chip One
Chip Two
Chip Three
Chip Four
import {h, Component} from 'preact';
import Chips from 'preact-material-components/Chips';
import 'preact-material-components/Chips/style.css';
import 'preact-material-components/Theme/style.css';

export default class ChipsPage extends Component {
  render(){
    return (
      <div>
        <Chips>
          <Chips.Chip>
            <Chips.Text>Chip One</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Text>Chip Two</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Text>Chip Three</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Text>Chip Four</Chips.Text>
          </Chips.Chip>
        </Chips>
      </div>
    );
  }
}
Input Chips
face
Jane Smith
more_vert
face
John Doe
more_vert
import {h, Component} from 'preact';
import Chips from 'preact-material-components/Chips';
import 'preact-material-components/Chips/style.css';

export default class ChipsPage extends Component {
  render(){
    return (
      <div>
        <Chips>
          <Chips.Chip>
            <Chips.Icon className="material-icons" leading>face</Chips.Icon>
            <Chips.Text>Jane Smith</Chips.Text>
            <Chips.Icon className="material-icons" trailing tabindex="0" role="button" title="More options">more_vert</Chips.Icon>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Icon className="material-icons" leading>face</Chips.Icon>
            <Chips.Text>John Doe</Chips.Text>
            <Chips.Icon className="material-icons" trailing tabindex="0" role="button" title="More options">more_vert</Chips.Icon>
          </Chips.Chip>
        </Chips>
      </div>
    )
  }
}
Choice Chips
Extra Small
Small
Medium
Large
Extra Large
import {h, Component} from 'preact';
import Chips from 'preact-material-components/Chips';
import 'preact-material-components/Chips/style.css';

export default class ChipsPage extends Component {
  render(){
    return (
      <div>
        <Chips choice>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Tops</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Bottoms</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Shoes</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Accessories</Chips.Text>
          </Chips.Chip>
        </Chips>
      </div>
    )
  }
}
Filter Chips
Tops
Bottoms
Shoes
favorite
Home
Accessories
import {h, Component} from 'preact';
import Chips from 'preact-material-components/Chips';
import 'preact-material-components/Chips/style.css';

export default class ChipsPage extends Component {
  render(){
    return (
      <div>
        <Chips filter>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Tops</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Bottoms</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Shoes</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Checkmark/>
            <Chips.Text>Accessories</Chips.Text>
          </Chips.Chip>
        </Chips>
      </div>
    )
  }
}
Action Chips
wb_sunny
Turn on lights
bookmark
Bookmark
alarm
Set alarm
directions
Get directions
import {h, Component} from 'preact';
import Chips from 'preact-material-components/Chips';
import 'preact-material-components/Chips/style.css';

export default class ChipsPage extends Component {
  render(){
    return (
      <div>
        <Chips>
          <Chips.Chip>
            <Chips.Icon className="material-icons" leading>wb_sunny</Chips.Icon>
            <Chips.Text>Turn on lights</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Icon className="material-icons" leading>bookmark</Chips.Icon>
            <Chips.Text>Bookmark</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Icon className="material-icons" leading>alarm</Chips.Icon>
            <Chips.Text>Set alarm</Chips.Text>
          </Chips.Chip>
          <Chips.Chip>
            <Chips.Icon className="material-icons" leading>directions</Chips.Icon>
            <Chips.Text>Get directions</Chips.Text>
          </Chips.Chip>
        </Chips>
      </div>
    )
  }
}