mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Brandy Carney 94159291b2 feat(components): improve button states and add new css properties (#19440 )

Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. 

- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components

references #18279 fixes #20213 fixes #19965

BREAKING CHANGE:

*Activated Class*

The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.

*CSS Variables*

The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

```
--background-hover: rgba(44, 44, 44, 0.08);
```

You will likely not see a hover state anymore. It should be updated to only set the desired color:

```
--background-hover: rgba(44, 44, 44);
```

If the opacity desired is something other than what the spec asks for, use:

```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```

2020-01-23 16:57:47 -05:00

test

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

usage

Master react (#18998 )

2019-08-13 14:24:44 -06:00

chip.ios.scss

refactor(chip): update styles, remove chip-icon and chip-button (#16264 )

2018-11-08 14:58:29 -06:00

chip.md.scss

refactor(chip): update styles, remove chip-icon and chip-button (#16264 )

2018-11-08 14:58:29 -06:00

chip.scss

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

chip.tsx

refactor(all): update to one (part 3) (#18874 )

2019-07-25 20:22:44 +02:00

readme.md

Master react (#18998 )

2019-08-13 14:24:44 -06:00

readme.md

ion-chip

Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.

Usage

Angular / javascript

<ion-chip>
  <ion-label>Default</ion-label>
</ion-chip>

<ion-chip>
  <ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>

<ion-chip color="secondary">
  <ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>

<ion-chip>
  <ion-icon name="pin"></ion-icon>
  <ion-label>Default</ion-label>
</ion-chip>

<ion-chip>
  <ion-icon name="heart" color="dark"></ion-icon>
  <ion-label>Default</ion-label>
</ion-chip>

<ion-chip>
  <ion-label>Button Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

<ion-chip>
  <ion-icon name="pin" color="primary"></ion-icon>
  <ion-label>Icon Chip</ion-label>
  <ion-icon name="close"></ion-icon>
</ion-chip>

<ion-chip>
  <ion-avatar>
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
  </ion-avatar>
  <ion-label>Avatar Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

React

import React from 'react';
import { IonChip, IonLabel, IonIcon, IonAvatar, IonContent } from '@ionic/react';

export const ChipExample: React.FC = () => (
  <IonContent>
    <IonChip>
      <IonLabel>Default</IonLabel>
    </IonChip>

    <IonChip>
      <IonLabel color="secondary">Secondary Label</IonLabel>
    </IonChip>

    <IonChip color="secondary">
      <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
    </IonChip>

    <IonChip>
      <IonIcon name="pin" />
      <IonLabel>Default</IonLabel>
    </IonChip>

    <IonChip>
      <IonIcon name="heart" color="dark" />
      <IonLabel>Default</IonLabel>
    </IonChip>

    <IonChip>
      <IonLabel>Button Chip</IonLabel>
      <IonIcon name="close-circle" />
    </IonChip>

    <IonChip>
      <IonIcon name="pin" color="primary" />
      <IonLabel>Icon Chip</IonLabel>
      <IonIcon name="close" />
    </IonChip>

    <IonChip>
      <IonAvatar>
        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
      </IonAvatar>
      <IonLabel>Avatar Chip</IonLabel>
      <IonIcon name="close-circle" />
    </IonChip>
  </IonContent>
);

Vue

<template>
  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label color="secondary">Secondary Label</ion-label>
  </ion-chip>

  <ion-chip color="secondary">
    <ion-label color="dark">Secondary w/ Dark label</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-icon name="pin"></ion-icon>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-icon name="heart" color="dark"></ion-icon>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label>Button Chip</ion-label>
    <ion-icon name="close-circle"></ion-icon>
  </ion-chip>

  <ion-chip>
    <ion-icon name="pin" color="primary"></ion-icon>
    <ion-label>Icon Chip</ion-label>
    <ion-icon name="close"></ion-icon>
  </ion-chip>

  <ion-chip>
    <ion-avatar>
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    </ion-avatar>
    <ion-label>Avatar Chip</ion-label>
    <ion-icon name="close-circle"></ion-icon>
  </ion-chip>
</template>

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`
`outline`	`outline`	Display an outline style button.	`boolean`	`false`

CSS Custom Properties

Name	Description
`--background`	Background of the chip
`--color`	Color of the chip

Dependencies

Depends on

ion-ripple-effect

Graph

graph TD;
  ion-chip --> ion-ripple-effect
  style ion-chip fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS