javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(chip): add disabled property (#20658)

Browse Source 
resolves #19510
This commit is contained in:
Hans Krywalsky
2020-11-05 20:18:24 +01:00
committed by GitHub
parent 639314ab21
commit 0a0cbd8f2a
12 changed files with 132 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components.d.ts vendored
View File

@@ -403,6 +403,10 @@ export namespace Components {
* 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](/docs/theming/basics).
*/
"color"?: Color;
/**
* If `true`, the user cannot interact with the chip.
*/
"disabled": boolean;
/**
* The mode determines which platform styles to use.
*/
@@ -3726,6 +3730,10 @@ declare namespace LocalJSX {
* 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](/docs/theming/basics).
*/
"color"?: Color;
/**
* If `true`, the user cannot interact with the chip.
*/
"disabled"?: boolean;
/**
* The mode determines which platform styles to use.
*/

5
core/src/components/chip/chip.scss
View File

@@ -37,6 +37,11 @@
box-sizing: border-box;
}
:host(.chip-disabled) {
cursor: default;
opacity: .4;
pointer-events: none;
}
// Chip Colors
// ---------------------------------------------

7
core/src/components/chip/chip.tsx
View File

@@ -28,14 +28,21 @@ export class Chip implements ComponentInterface {
*/
@Prop() outline = false;
/**
* If `true`, the user cannot interact with the chip.
*/
@Prop() disabled = false;
render() {
const mode = getIonMode(this);
return (
<Host
aria-disabled={this.disabled ? 'true' : null}
class={createColorClasses(this.color, {
[mode]: true,
'chip-outline': this.outline,
'chip-disabled': this.disabled,
'ion-activatable': true,
})}
>

75
core/src/components/chip/readme.md
View File

@@ -7,7 +7,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
## Usage
### Angular / javascript
### Angular
```html
<ion-chip>
@@ -22,6 +22,60 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip [disabled]="true">
<ion-label>Disabled Chip</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>
```
### Javascript
```html
<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 disabled="true">
<ion-label>Disabled Chip</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
@@ -81,6 +135,10 @@ export const ChipExamples: React.FC = () => {
<IonLabel color="dark">Secondary w/ Dark label</IonLabel>
</IonChip>
<IonChip disabled={true}>
<IonLabel>Disabled Chip</IonLabel>
</IonChip>
<IonChip>
<IonIcon icon={pin} />
<IonLabel>Default</IonLabel>
@@ -191,6 +249,10 @@ export class ChipExample {
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip :disabled="true">
<ion-label>Disabled Chip</ion-label>
</ion-chip>
<ion-chip>
<ion-icon :icon="pin"></ion-icon>
<ion-label>Default</ion-label>
@@ -240,11 +302,12 @@ export default defineComponent({
## 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](/docs/theming/basics). | `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` |
| 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the chip. | `boolean` | `false` |
| `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

26
core/src/components/chip/test/states/index.html
View File

@@ -17,6 +17,7 @@
<ion-app>
<ion-content>
<h3>Default</h3>
<p>
<ion-chip>
<ion-label>Default</ion-label>
@@ -195,6 +196,26 @@
</ion-chip>
</p>
<h3>Disabled</h3>
<p>
<ion-chip disabled>
<ion-label>Disabled</ion-label>
</ion-chip>
<ion-chip outline color="danger" class="ion-focused" disabled>
<ion-label>Disabled Outline</ion-label>
</ion-chip>
<ion-chip color="secondary" class="ion-focused" disabled>
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Disabled Secondary with Icon</ion-label>
</ion-chip>
<ion-chip outline class="ion-focused" disabled>
<ion-icon name="git-pull-request"></ion-icon>
<ion-label>Disabled Outline with Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
</p>
<h3>Custom</h3>
<!-- Custom Font -->
@@ -246,11 +267,6 @@
padding-left: 8px;
}
ion-chip {
display: inline-block !important;
vertical-align: middle;
}
.wide {
--background: #d1f3ff;
--background-hover: #add8e6;

4
core/src/components/chip/usage/angular.md
View File

@@ -11,6 +11,10 @@
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip [disabled]="true">
<ion-label>Disabled Chip</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>

4
core/src/components/chip/usage/javascript.md
View File

@@ -11,6 +11,10 @@
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip disabled="true">
<ion-label>Disabled Chip</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>

6
core/src/components/chip/usage/react.md
View File

@@ -24,6 +24,10 @@ export const ChipExamples: React.FC = () => {
<IonLabel color="dark">Secondary w/ Dark label</IonLabel>
</IonChip>
<IonChip disabled={true}>
<IonLabel>Disabled Chip</IonLabel>
</IonChip>
<IonChip>
<IonIcon icon={pin} />
<IonLabel>Default</IonLabel>
@@ -57,4 +61,4 @@ export const ChipExamples: React.FC = () => {
);
};
```
```

4
core/src/components/chip/usage/vue.md
View File

@@ -12,6 +12,10 @@
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip :disabled="true">
<ion-label>Disabled Chip</ion-label>
</ion-chip>
<ion-chip>
<ion-icon :icon="pin"></ion-icon>
<ion-label>Default</ion-label>