Compare commits
5 Commits
chip-tests
...
renovate/s
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
462a1051e4 | ||
|
|
cc75ff42e1 | ||
|
|
893d523997 | ||
|
|
be14dc4bb8 | ||
|
|
364faced75 |
@@ -27,6 +27,10 @@ runs:
|
||||
run: npm run build
|
||||
shell: bash
|
||||
working-directory: ./packages/angular
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
|
||||
@@ -8,7 +8,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
@@ -29,4 +29,4 @@ runs:
|
||||
with:
|
||||
name: ionic-core
|
||||
output: core/CoreBuild.zip
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/package.json
|
||||
|
||||
@@ -8,7 +8,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
|
||||
@@ -31,6 +31,10 @@ runs:
|
||||
run: npm run test.spec
|
||||
shell: bash
|
||||
working-directory: ./packages/react
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
|
||||
@@ -27,6 +27,10 @@ runs:
|
||||
run: npm run build
|
||||
shell: bash
|
||||
working-directory: ./packages/vue
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
|
||||
@@ -17,7 +17,7 @@ runs:
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-angular
|
||||
path: ./angular
|
||||
path: ./packages/angular
|
||||
filename: AngularBuild.zip
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
@@ -12,6 +12,10 @@ runs:
|
||||
name: ionic-core
|
||||
path: ./core
|
||||
filename: CoreBuild.zip
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: |
|
||||
git diff --exit-code || {
|
||||
|
||||
@@ -10,6 +10,10 @@ runs:
|
||||
run: npm ci
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🖌️ Lint
|
||||
run: npm run lint
|
||||
shell: bash
|
||||
|
||||
@@ -30,6 +30,10 @@ runs:
|
||||
run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: Test and Update
|
||||
id: test-and-update
|
||||
if: inputs.update == 'true'
|
||||
|
||||
@@ -21,6 +21,10 @@ runs:
|
||||
find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \;
|
||||
shell: bash
|
||||
working-directory: ./artifacts
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 📸 Push Screenshots
|
||||
# Configure user as Ionitron
|
||||
# and push only the changed .png snapshots
|
||||
|
||||
30
.github/workflows/build.yml
vendored
@@ -22,7 +22,7 @@ jobs:
|
||||
build-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
with:
|
||||
ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
|
||||
@@ -31,21 +31,21 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-clean-build
|
||||
|
||||
test-core-lint:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-lint
|
||||
|
||||
test-core-spec:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
|
||||
test-core-screenshot:
|
||||
@@ -62,7 +62,7 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@@ -90,14 +90,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-vue
|
||||
|
||||
build-vue-router:
|
||||
needs: [build-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-vue-router
|
||||
|
||||
test-vue-e2e:
|
||||
@@ -108,7 +108,7 @@ jobs:
|
||||
needs: [build-vue, build-vue-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-vue-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -126,14 +126,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-angular
|
||||
|
||||
build-angular-server:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-angular-server
|
||||
|
||||
test-angular-e2e:
|
||||
@@ -144,7 +144,7 @@ jobs:
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -162,14 +162,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-react
|
||||
|
||||
build-react-router:
|
||||
needs: [build-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
@@ -180,7 +180,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-react-router-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -202,7 +202,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
2
.github/workflows/codeql-analysis.yml
vendored
@@ -14,7 +14,7 @@ jobs:
|
||||
permissions:
|
||||
security-events: write
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: github/codeql-action/init@v4
|
||||
with:
|
||||
languages: javascript
|
||||
|
||||
2
.github/workflows/dev-build.yml
vendored
@@ -13,7 +13,7 @@ jobs:
|
||||
outputs:
|
||||
dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
# A 1 is required before the timestamp
|
||||
# as lerna will fail when there is a leading 0
|
||||
# See https://github.com/lerna/lerna/issues/2840
|
||||
|
||||
2
.github/workflows/nightly.yml
vendored
@@ -13,7 +13,7 @@ jobs:
|
||||
outputs:
|
||||
nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
# A 1 is required before the timestamp
|
||||
# as lerna will fail when there is a leading 0
|
||||
# See https://github.com/lerna/lerna/issues/2840
|
||||
|
||||
16
.github/workflows/release-ionic.yml
vendored
@@ -23,7 +23,7 @@ jobs:
|
||||
release-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/actions/publish-npm
|
||||
with:
|
||||
scope: '@ionic/core'
|
||||
@@ -48,7 +48,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/docs built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -67,7 +67,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -93,7 +93,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -118,7 +118,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -143,7 +143,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -163,7 +163,7 @@ jobs:
|
||||
needs: [release-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -188,7 +188,7 @@ jobs:
|
||||
needs: [release-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
4
.github/workflows/release.yml
vendored
@@ -58,7 +58,7 @@ jobs:
|
||||
contents: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
with:
|
||||
token: ${{ secrets.IONITRON_TOKEN }}
|
||||
fetch-depth: 0
|
||||
@@ -89,7 +89,7 @@ jobs:
|
||||
contents: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
# Pull the latest version of the reference
|
||||
# branch instead of the revision that triggered
|
||||
# the workflow otherwise we won't get the commit
|
||||
|
||||
30
.github/workflows/stencil-nightly.yml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
build-core-with-stencil-nightly:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-core-stencil-prerelease
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
@@ -35,21 +35,21 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-clean-build
|
||||
|
||||
test-core-lint:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-lint
|
||||
|
||||
test-core-spec:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
@@ -72,7 +72,7 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@@ -100,14 +100,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-vue
|
||||
|
||||
build-vue-router:
|
||||
needs: [build-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-vue-router
|
||||
|
||||
test-vue-e2e:
|
||||
@@ -118,7 +118,7 @@ jobs:
|
||||
needs: [build-vue, build-vue-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-vue-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -136,14 +136,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-angular
|
||||
|
||||
build-angular-server:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-angular-server
|
||||
|
||||
test-angular-e2e:
|
||||
@@ -154,7 +154,7 @@ jobs:
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -172,14 +172,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-react
|
||||
|
||||
build-react-router:
|
||||
needs: [build-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
@@ -190,7 +190,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-react-router-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -212,7 +212,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
6
.github/workflows/update-screenshots.yml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
build-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
|
||||
test-core-screenshot:
|
||||
@@ -47,7 +47,7 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@@ -59,7 +59,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: [test-core-screenshot]
|
||||
steps:
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
# Normally, we could just push with the
|
||||
# default GITHUB_TOKEN, but that will
|
||||
# not cause the build workflow
|
||||
|
||||
32
core/package-lock.json
generated
@@ -9,7 +9,7 @@
|
||||
"version": "8.7.17",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "4.38.0",
|
||||
"@stencil/core": "4.42.0",
|
||||
"ionicons": "^8.0.13",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
@@ -19,7 +19,6 @@
|
||||
"@capacitor/haptics": "^8.0.0",
|
||||
"@capacitor/keyboard": "^8.0.0",
|
||||
"@capacitor/status-bar": "^8.0.0",
|
||||
"@clack/prompts": "^0.11.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.56.1",
|
||||
@@ -629,9 +628,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@capacitor/core": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.1.tgz",
|
||||
"integrity": "sha512-5UqSWxGMp/B8KhYu7rAijqNtYslhcLh+TrbfU48PfdMDsPfaU/VY48sMNzC22xL8BmoFoql/3SKyP+pavTOvOA==",
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.2.tgz",
|
||||
"integrity": "sha512-EXZfxkL6GFJS2cb7TIBR7RiHA5iz6ufDcl1VmUpI2pga3lJ5Ck2+iqbx7N+osL3XYem9ad4XCidJEMm64DX6UQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
@@ -669,25 +668,6 @@
|
||||
"@capacitor/core": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@clack/core": {
|
||||
"version": "0.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"picocolors": "^1.0.0",
|
||||
"sisteransi": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@clack/prompts": {
|
||||
"version": "0.11.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@clack/core": "0.5.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"sisteransi": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"dev": true,
|
||||
@@ -1808,7 +1788,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.38.0",
|
||||
"version": "4.42.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.42.0.tgz",
|
||||
"integrity": "sha512-1mMkQ3+5jE343detvyFK+U3tJM8Qp8aaaOnGMo815BKMnFShUpioF9ziaX0dJ+goDKWIWbGZ2438dHIGsvE5ug==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "4.38.0",
|
||||
"@stencil/core": "4.42.0",
|
||||
"ionicons": "^8.0.13",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
@@ -44,7 +44,6 @@
|
||||
"@capacitor/haptics": "^8.0.0",
|
||||
"@capacitor/keyboard": "^8.0.0",
|
||||
"@capacitor/status-bar": "^8.0.0",
|
||||
"@clack/prompts": "^0.11.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.56.1",
|
||||
@@ -104,8 +103,7 @@
|
||||
"docker.build": "docker build -t ionic-playwright .",
|
||||
"test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
|
||||
"test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots='changed'",
|
||||
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
|
||||
"test.e2e.script": "node scripts/testing/e2e-script.mjs"
|
||||
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
|
||||
},
|
||||
"author": "Ionic Team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,260 +0,0 @@
|
||||
// The purpose of this script is to provide a way run the E2E tests
|
||||
// without having the developer to manually run multiple commands based
|
||||
// on the desired end result.
|
||||
// E.g. update the local ground truths for a specific component or
|
||||
// open the Playwright report after running the E2E tests.
|
||||
|
||||
import {
|
||||
intro,
|
||||
outro,
|
||||
confirm,
|
||||
spinner,
|
||||
isCancel,
|
||||
cancel,
|
||||
text,
|
||||
log,
|
||||
} from '@clack/prompts';
|
||||
import { exec, spawn } from 'child_process';
|
||||
import fs from 'node:fs';
|
||||
import { setTimeout as sleep } from 'node:timers/promises';
|
||||
import util from 'node:util';
|
||||
import color from 'picocolors';
|
||||
|
||||
async function main() {
|
||||
const execAsync = util.promisify(exec);
|
||||
const cleanUpFiles = async () => {
|
||||
// Clean up the local ground truths.
|
||||
const cleanUp = spinner();
|
||||
|
||||
// Inform the user that the local ground truths are being cleaned up.
|
||||
cleanUp.start('Restoring local ground truths');
|
||||
|
||||
// Reset the local ground truths.
|
||||
await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
|
||||
cleanUp.stop('Failed to reset local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
// Restore the local ground truths.
|
||||
await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
|
||||
cleanUp.stop('Failed to restore local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
// Inform the user that the local ground truths have been cleaned up.
|
||||
cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
|
||||
};
|
||||
|
||||
intro(color.inverse(' Update Local Ground Truths'));
|
||||
|
||||
// Ask user for the component name they want to test.
|
||||
const componentValue = await text({
|
||||
message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
|
||||
placeholder: 'Empty for all components',
|
||||
});
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(componentValue)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
// Ask user if they want to update their local ground truths.
|
||||
const shouldUpdateTruths = await confirm({
|
||||
message: 'Do you want to update your local ground truths?',
|
||||
});
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(shouldUpdateTruths)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
if (shouldUpdateTruths) {
|
||||
const defaultBaseBranch = 'main';
|
||||
|
||||
// Ask user for the base branch.
|
||||
let baseBranch = await text({
|
||||
message: 'Enter the base branch name:',
|
||||
placeholder: `default: ${defaultBaseBranch}`,
|
||||
})
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(baseBranch)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
// User didn't provide a base branch.
|
||||
if (!baseBranch) {
|
||||
baseBranch = defaultBaseBranch;
|
||||
}
|
||||
|
||||
/**
|
||||
* The provided base branch needs to be fetched.
|
||||
* This ensures that the local base branch is up-to-date with the
|
||||
* remote base branch. Otherwise, there might be errors stating that
|
||||
* certain files don't exist in the local base branch.
|
||||
*/
|
||||
const fetchBaseBranch = spinner();
|
||||
|
||||
// Inform the user that the base branch is being fetched.
|
||||
fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
|
||||
|
||||
// Fetch the base branch.
|
||||
await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
|
||||
fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
// Inform the user that the base branch has been fetched.
|
||||
fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
|
||||
|
||||
|
||||
const updateGroundTruth = spinner();
|
||||
|
||||
// Inform the user that the local ground truths are being updated.
|
||||
updateGroundTruth.start('Updating local ground truths');
|
||||
|
||||
// Check if user provided an existing file or directory.
|
||||
const isValidLocation = fs.existsSync(componentValue);
|
||||
|
||||
// User provided an existing file or directory.
|
||||
if (isValidLocation) {
|
||||
const stats = fs.statSync(componentValue);
|
||||
|
||||
// User provided a file as the component.
|
||||
// ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
|
||||
if (stats.isFile()) {
|
||||
// Update the local ground truths for the provided path.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
|
||||
// User provided a directory as the component.
|
||||
// ex: `componentValue` = `src/components/chip`
|
||||
if (stats.isDirectory()) {
|
||||
// Update the local ground truths for the provided directory.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
}
|
||||
// User provided a component name as the component.
|
||||
// ex: `componentValue` = `chip`
|
||||
else if (componentValue) {
|
||||
// Update the local ground truths for the provided component.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
// User provided an empty string.
|
||||
else {
|
||||
// Update the local ground truths for all components.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
|
||||
// Inform the user that the local ground truths have been updated.
|
||||
updateGroundTruth.stop('Updated local ground truths');
|
||||
}
|
||||
|
||||
const buildCore = spinner();
|
||||
|
||||
// Inform the user that the core is being built.
|
||||
buildCore.start('Building core');
|
||||
|
||||
/**
|
||||
* Build core
|
||||
* Otherwise, the uncommitted changes will not be reflected in the tests because:
|
||||
* - popping the stash doesn't trigger a re-render even if `npm start` is running
|
||||
* - app is not running the `npm start` command
|
||||
*/
|
||||
await execAsync('npm run build').catch((error) => {
|
||||
// Clean up the local ground truths.
|
||||
cleanUpFiles();
|
||||
|
||||
buildCore.stop('Failed to build core');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
buildCore.stop('Built core');
|
||||
|
||||
const runE2ETests = spinner();
|
||||
|
||||
// Inform the user that the E2E tests are being run.
|
||||
runE2ETests.start('Running E2E tests');
|
||||
|
||||
// User provided a component value.
|
||||
if (componentValue) {
|
||||
await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
|
||||
// Clean up the local ground truths.
|
||||
cleanUpFiles();
|
||||
|
||||
runE2ETests.stop('Failed to run E2E tests');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
} else {
|
||||
await execAsync('npm run test.e2e.docker.ci').catch((error) => {
|
||||
// Clean up the local ground truths.
|
||||
cleanUpFiles();
|
||||
|
||||
runE2ETests.stop('Failed to run E2E tests');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
|
||||
runE2ETests.stop('Ran E2E tests');
|
||||
|
||||
// Clean up the local ground truths.
|
||||
await cleanUpFiles();
|
||||
|
||||
// Ask user if they want to open the Playwright report.
|
||||
const shouldOpenReport = await confirm({
|
||||
message: 'Do you want to open the Playwright report?',
|
||||
});
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(shouldOpenReport)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
// User chose to open the Playwright report.
|
||||
if (shouldOpenReport) {
|
||||
// Use spawn to display the server information and the key to quit the server.
|
||||
spawn('npx', ['playwright', 'show-report'], {
|
||||
stdio: 'inherit',
|
||||
});
|
||||
} else {
|
||||
// Inform the user that the Playwright report can be opened by running the following command.
|
||||
log.info('If you change your mind, you can open the Playwright report by running the following command:');
|
||||
log.info(color.bold('npx playwright show-report'));
|
||||
}
|
||||
|
||||
if (shouldOpenReport) {
|
||||
outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
|
||||
} else {
|
||||
outro("You're all set!");
|
||||
}
|
||||
|
||||
await sleep(1000);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
@@ -1,27 +1,23 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not vary across modes/directions
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
/**
|
||||
* This behavior does not vary across modes/directions.
|
||||
*/
|
||||
test.describe(title('chip: states'), () => {
|
||||
test('should render disabled state', async ({ page }) => {
|
||||
await page.goto(`/src/components/chip/test/states`, config);
|
||||
await page.setContent(
|
||||
`<ion-chip disabled="true">
|
||||
<ion-label>Disabled</ion-label>
|
||||
</ion-chip>`,
|
||||
config
|
||||
);
|
||||
|
||||
const container = page.locator('#disabled');
|
||||
const chip = page.locator('ion-chip');
|
||||
|
||||
await expect(container).toHaveScreenshot(screenshot(`chip-disabled`));
|
||||
await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
|
||||
});
|
||||
|
||||
test('should render activated state', async ({ page }) => {
|
||||
await page.goto(`/src/components/chip/test/states`, config);
|
||||
|
||||
const container = page.locator('#activated');
|
||||
|
||||
await expect(container).toHaveScreenshot(screenshot(`chip-activated`));
|
||||
});
|
||||
|
||||
test('should custom chip', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -19,285 +19,211 @@
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
|
||||
<div id="default">
|
||||
<p>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px" class="ion-focused">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
<h3>Colors</h3>
|
||||
<p>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>Success with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning">
|
||||
<ion-label>Warning with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip color="primary" class="ion-focused">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="ion-focused">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>Success with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" class="ion-focused">
|
||||
<ion-label>Warning with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" class="ion-focused">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" class="ion-focused">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" class="ion-focused">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" class="ion-focused">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Outline</h3>
|
||||
|
||||
<p>
|
||||
<ion-chip outline>
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip outline class="ion-focused">
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" class="ion-focused">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" class="ion-focused">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline class="ion-focused">
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<div id="disabled">
|
||||
<p>
|
||||
<ion-chip disabled>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" disabled>
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" disabled>
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" disabled>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" disabled>
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" disabled>
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" disabled>
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" disabled>
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" disabled>
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" disabled>
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline disabled>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" disabled>
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" disabled>
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary" disabled>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success" disabled>
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning" disabled>
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" disabled>
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light" disabled>
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium" disabled>
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark" disabled>
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Activated</h3>
|
||||
<div id="activated">
|
||||
<p>
|
||||
<ion-chip class="ion-activated">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" class="ion-activated">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="ion-activated">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" class="ion-activated">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" class="ion-activated">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" class="ion-activated">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" class="ion-activated">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" class="ion-activated">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" class="ion-activated">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" class="ion-activated">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline class="ion-activated">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" class="ion-activated">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" class="ion-activated">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary" class="ion-activated">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success" class="ion-activated">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning" class="ion-activated">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" class="ion-activated">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light" class="ion-activated">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium" class="ion-activated">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark" class="ion-activated">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Focused</h3>
|
||||
<p>
|
||||
`ion-chip` is not focusable by default, meaning it doesn't use `ion-focusable`. But it does have focus styles
|
||||
that target the `:focus` pseudo-class. In order to see the focus styles, you need to add tabindex="0" and tab
|
||||
into the chip.
|
||||
<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>
|
||||
<div id="focused">
|
||||
<p>
|
||||
<ion-chip tabindex="0">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" tabindex="0">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" tabindex="0">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" tabindex="0">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" tabindex="0">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" tabindex="0">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" tabindex="0">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" tabindex="0">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" tabindex="0">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" tabindex="0">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline tabindex="0">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" tabindex="0">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" tabindex="0">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary" tabindex="0">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success" tabindex="0">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning" tabindex="0">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" tabindex="0">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light" tabindex="0">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium" tabindex="0">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark" tabindex="0">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
||||
@@ -306,6 +232,9 @@
|
||||
<ion-chip class="wide" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip class="wide ion-focused" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
@@ -316,19 +245,25 @@
|
||||
<ion-chip color="secondary" class="custom">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var chips = document.querySelectorAll('ion-chip');
|
||||
var buttons = document.querySelectorAll('ion-chip');
|
||||
|
||||
for (var i = 0; i < chips.length; i++) {
|
||||
chips[i].addEventListener('click', (event) => onClick(event));
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
console.log('clicked the chip', ev.target.innerText);
|
||||
console.log('clicked the button', ev.target.innerText);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||