Inicio Explorar Axuda
Iniciar sesión
wpfat23-7
/
RiffMaster_WPFaT2023_Project
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Árbore: 1cdcabc05e
Ramas Etiquetas
RiffMaster_WPFa...
/
Frontend
/
RiffMasterFront
/
node_modules
/
@material
/
chips
wpfat23-7 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
..
action 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
chip 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
chip-set 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
deprecated 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
dist 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
CHANGELOG.md 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
LICENSE 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
README.md 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_assist-chip-theme.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_chip-set-theme.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_chip-set.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_chip-theme.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_chip.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_filter-chip-theme.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_index.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_input-chip-theme.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
_suggestion-chip-theme.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
index.d.ts 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
index.js 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
index.js.map 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
package.json 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos
styles.scss 44a43ea56d init commit (frontend and backend) %!s(int64=3) %!d(string=hai) anos

README.md

Chips

Contents

Looking for deprecated chips resources? Visit the deprecated readme.

Using chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.

Installing chips

npm install @material/chips

Styles

@use "@material/chips/styles";

JavaScript instantiation

Note: there's work planned to replace the mdc-evolution-* prefix of chips with the standard mdc-chip-* prefix.

import {MDCChipSet} from '@material/chips';
const chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));

Chips

Chips are comprised of chip sets which are comprised of chip instances which are in turn comprised of actions. See the readme for each subcomponent for more detail.

Basic action chip set example

<span class="mdc-evolution-chip-set" role="grid">
  <span class="mdc-evolution-chip-set__chips" role="presentation">
    <span class="mdc-evolution-chip" role="row" id="c0">
      <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
        <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="0">
          <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
          <span class="mdc-evolution-chip__text-label">Chip one</span>
        </button>
      </span>
    </span>
    <span class="mdc-evolution-chip" role="row" id="c1">
      <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
        <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="-1">
          <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
          <span class="mdc-evolution-chip__text-label">Chip two</span>
        </button>
      </span>
    </span>
  </span>
</span>

API

See the readme of each subcomponent for more detail.

Usage within frameworks

If you are using a JavaScript framework, such as React or Angular, you can create chips for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.