├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .github ├── CODEOWNERS └── workflows │ └── CI.yml ├── .gitignore ├── LICENSE ├── package-lock.json ├── package.json ├── readme.md ├── renovate.json5 ├── scripts └── mkcomponent.sh ├── src ├── assets │ ├── avatar-ben.png │ ├── avatar-finn.png │ ├── avatar-frodo.jpg │ ├── avatar-gollum.jpg │ ├── avatar-han.png │ ├── avatar-leia.png │ ├── avatar-luke.png │ ├── avatar-poe.png │ ├── avatar-rey.png │ ├── avatar-samwise.jpg │ ├── avatar-yoda.png │ ├── avatar.svg │ ├── boniver.jpeg │ ├── card-album.png │ ├── card-coworker-avatar.png │ ├── card-coworker-header.png │ ├── card-top-img.png │ ├── chancetherapper.jpeg │ ├── childishgambino.jpeg │ ├── component-icon.svg │ ├── fonts │ │ ├── Roboto-Medium.ttf │ │ └── Roboto-Regular.ttf │ ├── icon │ │ ├── apple-touch-icon.png │ │ ├── favicon.ico │ │ ├── icon192.png │ │ └── icon512.png │ ├── ironwine.jpeg │ ├── kimbra.jpeg │ ├── logo-amtrak.png │ ├── logo-shipt.png │ ├── logo-sworkit.png │ ├── logo-untappd.png │ ├── madison.jpg │ ├── pinkfloyd.jpeg │ ├── porterrobinson.jpeg │ ├── slide-1.png │ ├── slide-2.png │ ├── slide-3.png │ ├── slide-4.png │ ├── thebeatles.jpeg │ └── thumbnail.svg ├── components.d.ts ├── components │ ├── _template_ │ │ ├── _template_.css │ │ └── _template_.tsx │ ├── accordion │ │ ├── accordion.css │ │ └── accordion.tsx │ ├── action-sheet │ │ ├── action-sheet.css │ │ └── action-sheet.tsx │ ├── alert │ │ ├── alert.css │ │ └── alert.tsx │ ├── app-home │ │ ├── app-home.css │ │ ├── app-home.e2e.ts │ │ ├── app-home.spec.ts │ │ └── app-home.tsx │ ├── app-root │ │ ├── app-root.css │ │ ├── app-root.e2e.ts │ │ ├── app-root.spec.ts │ │ └── app-root.tsx │ ├── avatar │ │ ├── avatar.css │ │ └── avatar.tsx │ ├── badge │ │ ├── badge.css │ │ └── badge.tsx │ ├── breadcrumbs │ │ ├── breadcrumbs.css │ │ └── breadcrumbs.tsx │ ├── button │ │ ├── button.css │ │ └── button.tsx │ ├── card │ │ ├── card.css │ │ └── card.tsx │ ├── checkbox │ │ ├── checkbox.css │ │ └── checkbox.tsx │ ├── chip │ │ ├── chip.css │ │ └── chip.tsx │ ├── component-details │ │ ├── component-details.css │ │ └── component-details.tsx │ ├── content │ │ ├── content.css │ │ └── content.tsx │ ├── datetime │ │ ├── datetime.css │ │ └── datetime.tsx │ ├── fab │ │ ├── fab.css │ │ └── fab.tsx │ ├── grid │ │ ├── grid.css │ │ └── grid.tsx │ ├── icons │ │ ├── icons.css │ │ └── icons.tsx │ ├── infinite-scroll │ │ ├── infinite-scroll.css │ │ └── infinite-scroll.tsx │ ├── input │ │ ├── input.css │ │ └── input.tsx │ ├── item-group │ │ ├── item-group.css │ │ └── item-group.tsx │ ├── item │ │ ├── item.css │ │ └── item.tsx │ ├── list │ │ ├── list.css │ │ └── list.tsx │ ├── loading │ │ ├── loading.css │ │ └── loading.tsx │ ├── menu │ │ ├── menu.css │ │ └── menu.tsx │ ├── modal │ │ ├── modal-content.tsx │ │ ├── modal.css │ │ └── modal.tsx │ ├── nav │ │ ├── nav.css │ │ └── nav.tsx │ ├── note │ │ ├── note.css │ │ └── note.tsx │ ├── picker │ │ ├── picker.css │ │ └── picker.tsx │ ├── popover │ │ ├── popover-example-page.tsx │ │ ├── popover.css │ │ └── popover.tsx │ ├── progress │ │ ├── progress.css │ │ └── progress.tsx │ ├── radio │ │ ├── radio.css │ │ └── radio.tsx │ ├── range │ │ ├── range.css │ │ └── range.tsx │ ├── refresher │ │ ├── refresher.css │ │ └── refresher.tsx │ ├── reorder │ │ ├── reorder.css │ │ └── reorder.tsx │ ├── searchbar │ │ ├── searchbar.css │ │ └── searchbar.tsx │ ├── segment │ │ ├── segment.css │ │ └── segment.tsx │ ├── select │ │ ├── select.css │ │ └── select.tsx │ ├── skeleton-text │ │ ├── skeleton-text.css │ │ └── skeleton-text.tsx │ ├── spinner │ │ ├── spinner.css │ │ └── spinner.tsx │ ├── tabs │ │ ├── tabs-games.tsx │ │ ├── tabs-movies.tsx │ │ ├── tabs-music.tsx │ │ ├── tabs.css │ │ └── tabs.tsx │ ├── text │ │ ├── text.css │ │ └── text.tsx │ ├── thumbnail │ │ ├── thumbnail.css │ │ └── thumbnail.tsx │ ├── toast │ │ ├── toast.css │ │ └── toast.tsx │ ├── toggle │ │ ├── toggle.css │ │ └── toggle.tsx │ └── toolbar │ │ ├── toolbar.css │ │ └── toolbar.tsx ├── global │ ├── app.css │ └── app.ts ├── index.html ├── interfaces.d.ts ├── manifest.json └── utils │ └── component-utils.ts ├── static.json ├── stencil.config.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "parser": "@typescript-eslint/parser", 7 | "parserOptions": { 8 | "project": "tsconfig.json", 9 | "sourceType": "module" 10 | }, 11 | "plugins": [ 12 | "@typescript-eslint" 13 | ], 14 | "rules": { 15 | "@typescript-eslint/adjacent-overload-signatures": "error", 16 | "@typescript-eslint/array-type": "error", 17 | "@typescript-eslint/await-thenable": "error", 18 | "@typescript-eslint/ban-types": "error", 19 | "@typescript-eslint/naming-convention": "error", 20 | "@typescript-eslint/consistent-type-assertions": "error", 21 | "@typescript-eslint/indent": [ 22 | "error", 23 | 2, 24 | { 25 | "ArrayExpression": "first", 26 | "ObjectExpression": "first", 27 | "FunctionDeclaration": { 28 | "parameters": "first" 29 | }, 30 | "FunctionExpression": { 31 | "parameters": "first" 32 | } 33 | } 34 | ], 35 | "@typescript-eslint/interface-name-prefix": "off", 36 | "@typescript-eslint/member-ordering": "off", 37 | "@typescript-eslint/no-empty-function": "error", 38 | "@typescript-eslint/no-empty-interface": "off", 39 | "@typescript-eslint/no-explicit-any": "off", 40 | "@typescript-eslint/no-inferrable-types": "error", 41 | "@typescript-eslint/no-misused-new": "error", 42 | "@typescript-eslint/no-namespace": "off", 43 | "@typescript-eslint/no-non-null-assertion": "error", 44 | "@typescript-eslint/no-parameter-properties": "off", 45 | "@typescript-eslint/no-unnecessary-type-assertion": "off", 46 | "@typescript-eslint/no-use-before-define": "off", 47 | "@typescript-eslint/no-var-requires": "error", 48 | "@typescript-eslint/prefer-for-of": "off", 49 | "@typescript-eslint/prefer-function-type": "error", 50 | "@typescript-eslint/prefer-namespace-keyword": "error", 51 | "@typescript-eslint/quotes": [ 52 | "error", 53 | "single" 54 | ], 55 | "@typescript-eslint/triple-slash-reference": "error", 56 | "@typescript-eslint/unified-signatures": "off", 57 | "arrow-parens": [ 58 | "off", 59 | "as-needed" 60 | ], 61 | "camelcase": "error", 62 | "comma-dangle": "off", 63 | "complexity": "off", 64 | "constructor-super": "error", 65 | "curly": [ 66 | "error", 67 | "multi-line" 68 | ], 69 | "dot-notation": "off", 70 | "eqeqeq": [ 71 | "error", 72 | "smart" 73 | ], 74 | "guard-for-in": "off", 75 | "id-blacklist": [ 76 | "error", 77 | "any", 78 | "Number", 79 | "number", 80 | "String", 81 | "string", 82 | "Boolean", 83 | "boolean", 84 | "Undefined", 85 | "undefined" 86 | ], 87 | "id-match": "error", 88 | "import/no-unassigned-import": "off", 89 | "linebreak-style": "off", 90 | "max-classes-per-file": "off", 91 | "max-len": "off", 92 | "new-parens": "error", 93 | "no-bitwise": "off", 94 | "no-caller": "error", 95 | "no-cond-assign": "error", 96 | "no-console": "off", 97 | "no-constant-condition": "error", 98 | "no-control-regex": "error", 99 | "no-debugger": "error", 100 | "no-duplicate-case": "error", 101 | "no-duplicate-imports": "error", 102 | "no-empty": "error", 103 | "no-eval": "error", 104 | "no-fallthrough": "off", 105 | "no-invalid-regexp": "error", 106 | "no-invalid-this": "off", 107 | "no-irregular-whitespace": "error", 108 | "no-multiple-empty-lines": "off", 109 | "no-new-wrappers": "error", 110 | "no-redeclare": "error", 111 | "no-regex-spaces": "error", 112 | "no-return-await": "error", 113 | "no-sequences": "error", 114 | "no-shadow": [ 115 | "warn", 116 | { 117 | "hoist": "all" 118 | } 119 | ], 120 | "no-sparse-arrays": "error", 121 | "no-template-curly-in-string": "error", 122 | "no-throw-literal": "error", 123 | "no-trailing-spaces": "error", 124 | "no-undef-init": "error", 125 | "no-underscore-dangle": "error", 126 | "no-unsafe-finally": "error", 127 | "no-unused-expressions": [ 128 | "error", 129 | { 130 | "allowShortCircuit": true 131 | } 132 | ], 133 | "no-unused-labels": "error", 134 | "no-var": "error", 135 | "object-shorthand": "error", 136 | "one-var": [ 137 | "off", 138 | "never" 139 | ], 140 | "prefer-const": "error", 141 | "quote-props": "off", 142 | "radix": "error", 143 | "space-in-parens": [ 144 | "error", 145 | "never" 146 | ], 147 | "spaced-comment": "error", 148 | "use-isnan": "error", 149 | "valid-typeof": "off" 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ## GITATTRIBUTES FOR WEB PROJECTS 2 | # 3 | # These settings are for any web project. 4 | # 5 | # Details per file setting: 6 | # text These files should be normalized (i.e. convert CRLF to LF). 7 | # binary These files are binary and should be left untouched. 8 | # 9 | # Note that binary is a macro for -text -diff. 10 | ###################################################################### 11 | 12 | # Auto detect 13 | ## Handle line endings automatically for files detected as 14 | ## text and leave all files detected as binary untouched. 15 | ## This will handle all files NOT defined below. 16 | * text=auto 17 | 18 | # Source code 19 | *.bash text eol=lf 20 | *.bat text eol=crlf 21 | *.cmd text eol=crlf 22 | *.coffee text 23 | *.css text 24 | *.htm text diff=html 25 | *.html text diff=html 26 | *.inc text 27 | *.ini text 28 | *.js text 29 | *.json text 30 | *.jsx text 31 | *.less text 32 | *.ls text 33 | *.map text -diff 34 | *.od text 35 | *.onlydata text 36 | *.php text diff=php 37 | *.pl text 38 | *.ps1 text eol=crlf 39 | *.py text diff=python 40 | *.rb text diff=ruby 41 | *.sass text 42 | *.scm text 43 | *.scss text diff=css 44 | *.sh text eol=lf 45 | *.sql text 46 | *.styl text 47 | *.tag text 48 | *.ts text 49 | *.tsx text 50 | *.xml text 51 | *.xhtml text diff=html 52 | 53 | # Docker 54 | Dockerfile text 55 | 56 | # Documentation 57 | *.ipynb text 58 | *.markdown text 59 | *.md text 60 | *.mdwn text 61 | *.mdown text 62 | *.mkd text 63 | *.mkdn text 64 | *.mdtxt text 65 | *.mdtext text 66 | *.txt text 67 | AUTHORS text 68 | CHANGELOG text 69 | CHANGES text 70 | CONTRIBUTING text 71 | COPYING text 72 | copyright text 73 | *COPYRIGHT* text 74 | INSTALL text 75 | license text 76 | LICENSE text 77 | NEWS text 78 | readme text 79 | *README* text 80 | TODO text 81 | 82 | # Templates 83 | *.dot text 84 | *.ejs text 85 | *.haml text 86 | *.handlebars text 87 | *.hbs text 88 | *.hbt text 89 | *.jade text 90 | *.latte text 91 | *.mustache text 92 | *.njk text 93 | *.phtml text 94 | *.tmpl text 95 | *.tpl text 96 | *.twig text 97 | *.vue text 98 | 99 | # Configs 100 | *.cnf text 101 | *.conf text 102 | *.config text 103 | .editorconfig text 104 | .env text 105 | .gitattributes text 106 | .gitconfig text 107 | .htaccess text 108 | *.lock text -diff 109 | package-lock.json text -diff 110 | *.toml text 111 | *.yaml text 112 | *.yml text 113 | browserslist text 114 | Makefile text 115 | makefile text 116 | 117 | # Heroku 118 | Procfile text 119 | 120 | # Graphics 121 | *.ai binary 122 | *.bmp binary 123 | *.eps binary 124 | *.gif binary 125 | *.gifv binary 126 | *.ico binary 127 | *.jng binary 128 | *.jp2 binary 129 | *.jpg binary 130 | *.jpeg binary 131 | *.jpx binary 132 | *.jxr binary 133 | *.pdf binary 134 | *.png binary 135 | *.psb binary 136 | *.psd binary 137 | # SVG treated as an asset (binary) by default. 138 | *.svg text 139 | # If you want to treat it as binary, 140 | # use the following line instead. 141 | # *.svg binary 142 | *.svgz binary 143 | *.tif binary 144 | *.tiff binary 145 | *.wbmp binary 146 | *.webp binary 147 | 148 | # Audio 149 | *.kar binary 150 | *.m4a binary 151 | *.mid binary 152 | *.midi binary 153 | *.mp3 binary 154 | *.ogg binary 155 | *.ra binary 156 | 157 | # Video 158 | *.3gpp binary 159 | *.3gp binary 160 | *.as binary 161 | *.asf binary 162 | *.asx binary 163 | *.fla binary 164 | *.flv binary 165 | *.m4v binary 166 | *.mng binary 167 | *.mov binary 168 | *.mp4 binary 169 | *.mpeg binary 170 | *.mpg binary 171 | *.ogv binary 172 | *.swc binary 173 | *.swf binary 174 | *.webm binary 175 | 176 | # Archives 177 | *.7z binary 178 | *.gz binary 179 | *.jar binary 180 | *.rar binary 181 | *.tar binary 182 | *.zip binary 183 | 184 | # Fonts 185 | *.ttf binary 186 | *.eot binary 187 | *.otf binary 188 | *.woff binary 189 | *.woff2 binary 190 | 191 | # Executables 192 | *.exe binary 193 | *.pyc binary 194 | 195 | # RC files (like .babelrc or .eslintrc) 196 | *.*rc text 197 | 198 | # Ignore files (like .npmignore or .gitignore) 199 | *.*ignore text -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @ionic-team/framework 2 | -------------------------------------------------------------------------------- /.github/workflows/CI.yml: -------------------------------------------------------------------------------- 1 | # GitHub Actions docs 2 | # https://help.github.com/en/articles/about-github-actions 3 | # https://help.github.com/en/articles/workflow-syntax-for-github-actions 4 | 5 | name: Install Dependencies, Lint, Build and Test 6 | 7 | on: [push] 8 | 9 | jobs: 10 | test: 11 | name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} 12 | runs-on: ${{ matrix.os }} 13 | strategy: 14 | matrix: 15 | node_version: [18] 16 | os: [windows-latest, macOS-latest] 17 | 18 | steps: 19 | - uses: actions/checkout@v3 20 | - name: Use Node.js ${{ matrix.node_version }} 21 | uses: actions/setup-node@v3 22 | with: 23 | node-version: ${{ matrix.node_version }} 24 | - name: Install Dependencies 25 | run: npm ci 26 | - name: Lint 27 | run: npm run lint 28 | - name: Build 29 | run: npm run build -- --prod 30 | - name: Test 31 | run: npm test 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | !www/favicon.ico 3 | www/ 4 | 5 | *~ 6 | *.sw[mnpcod] 7 | *.log 8 | *.lock 9 | *.tmp 10 | *.tmp.* 11 | log.txt 12 | *.sublime-project 13 | *.sublime-workspace 14 | 15 | .stencil/ 16 | .idea/ 17 | .vscode/ 18 | .sass-cache/ 19 | .versions/ 20 | node_modules/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | .env 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 ionic-docs-demo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-docs-demo", 3 | "private": true, 4 | "version": "0.0.1", 5 | "description": "ionic-docs-demo", 6 | "license": "MIT", 7 | "files": [ 8 | "dist/" 9 | ], 10 | "scripts": { 11 | "lint": "eslint src/ --ext .js,.ts,.jsx,.tsx", 12 | "lint.fix": "npm run lint -- --fix", 13 | "build": "stencil build", 14 | "start": "stencil build --dev --watch --serve", 15 | "test": "stencil test --spec --e2e", 16 | "test.watch": "stencil test --spec --e2e --watchAll", 17 | "generate": "stencil generate" 18 | }, 19 | "dependencies": { 20 | "@ionic/core": "^8.0.0" 21 | }, 22 | "devDependencies": { 23 | "@stencil/core": "^4.14.0", 24 | "@types/jest": "^29.5.12", 25 | "@typescript-eslint/eslint-plugin": "^7.0.0", 26 | "@typescript-eslint/parser": "^7.0.0", 27 | "eslint": "^8.0.0", 28 | "jest": "^29.7.0", 29 | "jest-cli": "^29.7.0", 30 | "puppeteer": "^22.15.0", 31 | "typescript": "^5.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Ionic Kitchen Sink 2 | 3 | The Ionic Kitchen Sink is a collection of demos of Ionic components. 4 | 5 | It can be previewed live on the Ionic Framework documentation site here: https://ionicframework.com/docs 6 | 7 | 8 | ## Getting Started 9 | 10 | To start building, clone this repository: 11 | 12 | ```bash 13 | git clone https://github.com/ionic-team/docs-demo.git 14 | ``` 15 | 16 | Once cloned, run the following to install dependencies and run the app: 17 | 18 | ```bash 19 | npm i 20 | npm start 21 | ``` 22 | 23 | ## Production 24 | 25 | To build for production, run: 26 | 27 | ```bash 28 | npm run build 29 | ``` 30 | 31 | 32 | ## Unit Tests 33 | 34 | To run the unit tests once, run: 35 | 36 | ```bash 37 | npm test 38 | ``` 39 | 40 | To run the unit tests and watch for file changes during development, run: 41 | 42 | ```bash 43 | npm run test.watch 44 | ``` 45 | -------------------------------------------------------------------------------- /renovate.json5: -------------------------------------------------------------------------------- 1 | { 2 | $schema: "https://docs.renovatebot.com/renovate-schema.json", 3 | extends: ["config:base", ":semanticCommitTypeAll(chore)"], 4 | packageRules: [ 5 | { 6 | "matchPackagePatterns": ["@ionic/"], 7 | "groupName": "ionic", 8 | }, 9 | { 10 | "matchPackagePatterns": ["@stencil/"], 11 | "groupName": "stencil", 12 | }, 13 | { 14 | "matchPackageNames": ["puppeteer"], 15 | // Stencil supports Puppeteer 21 16 | "allowedVersions": "^21.0.0", 17 | }, 18 | { 19 | "matchPackageNames": ["jest", "jest-cli", "@types/jest"], 20 | "groupName": "jest", 21 | }, 22 | { 23 | "matchPackageNames": ["@typescript-eslint/eslint-plugin", "@typescript-eslint/parser", "eslint"], 24 | "groupName": "eslint", 25 | } 26 | ], 27 | dependencyDashboard: false, 28 | minimumReleaseAge: "3 days", 29 | rebaseWhen: "never", 30 | schedule: ["every weekday before 11am"], 31 | semanticCommits: "enabled", 32 | includePaths: [ 33 | "package.json" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /scripts/mkcomponent.sh: -------------------------------------------------------------------------------- 1 | cap="$(echo "$1" | gsed 's/.*/\u&/')" 2 | cp -R src/components/_template_ src/components/$1 3 | mv src/components/$1/_template_.tsx src/components/$1/$1.tsx 4 | mv src/components/$1/_template_.css src/components/$1/$1.css 5 | 6 | gsed -i "s/_template_/$1/g" src/components/$1/$1.tsx 7 | gsed -i "s/_name_/$cap/g" src/components/$1/$1.tsx -------------------------------------------------------------------------------- /src/assets/avatar-ben.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-ben.png -------------------------------------------------------------------------------- /src/assets/avatar-finn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-finn.png -------------------------------------------------------------------------------- /src/assets/avatar-frodo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-frodo.jpg -------------------------------------------------------------------------------- /src/assets/avatar-gollum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-gollum.jpg -------------------------------------------------------------------------------- /src/assets/avatar-han.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-han.png -------------------------------------------------------------------------------- /src/assets/avatar-leia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-leia.png -------------------------------------------------------------------------------- /src/assets/avatar-luke.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-luke.png -------------------------------------------------------------------------------- /src/assets/avatar-poe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-poe.png -------------------------------------------------------------------------------- /src/assets/avatar-rey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-rey.png -------------------------------------------------------------------------------- /src/assets/avatar-samwise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-samwise.jpg -------------------------------------------------------------------------------- /src/assets/avatar-yoda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/avatar-yoda.png -------------------------------------------------------------------------------- /src/assets/avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/boniver.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/boniver.jpeg -------------------------------------------------------------------------------- /src/assets/card-album.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/card-album.png -------------------------------------------------------------------------------- /src/assets/card-coworker-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/card-coworker-avatar.png -------------------------------------------------------------------------------- /src/assets/card-coworker-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/card-coworker-header.png -------------------------------------------------------------------------------- /src/assets/card-top-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/card-top-img.png -------------------------------------------------------------------------------- /src/assets/chancetherapper.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/chancetherapper.jpeg -------------------------------------------------------------------------------- /src/assets/childishgambino.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/childishgambino.jpeg -------------------------------------------------------------------------------- /src/assets/component-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /src/assets/icon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/icon/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/assets/icon/icon192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/icon/icon192.png -------------------------------------------------------------------------------- /src/assets/icon/icon512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/icon/icon512.png -------------------------------------------------------------------------------- /src/assets/ironwine.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/ironwine.jpeg -------------------------------------------------------------------------------- /src/assets/kimbra.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/kimbra.jpeg -------------------------------------------------------------------------------- /src/assets/logo-amtrak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/logo-amtrak.png -------------------------------------------------------------------------------- /src/assets/logo-shipt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/logo-shipt.png -------------------------------------------------------------------------------- /src/assets/logo-sworkit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/logo-sworkit.png -------------------------------------------------------------------------------- /src/assets/logo-untappd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/logo-untappd.png -------------------------------------------------------------------------------- /src/assets/madison.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/madison.jpg -------------------------------------------------------------------------------- /src/assets/pinkfloyd.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/pinkfloyd.jpeg -------------------------------------------------------------------------------- /src/assets/porterrobinson.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/porterrobinson.jpeg -------------------------------------------------------------------------------- /src/assets/slide-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/slide-1.png -------------------------------------------------------------------------------- /src/assets/slide-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/slide-2.png -------------------------------------------------------------------------------- /src/assets/slide-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/slide-3.png -------------------------------------------------------------------------------- /src/assets/slide-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/slide-4.png -------------------------------------------------------------------------------- /src/assets/thebeatles.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/assets/thebeatles.jpeg -------------------------------------------------------------------------------- /src/assets/thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/_template_/_template_.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/_template_/_template_.css -------------------------------------------------------------------------------- /src/components/_template_/_template_.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/naming-convention */ 2 | import { Component, h } from '@stencil/core'; 3 | 4 | @Component({ 5 | tag: 'component-_template_', 6 | styleUrl: '_template_.css' 7 | }) 8 | export class _template_ { 9 | render() { 10 | return [ 11 | 12 | 13 | 14 | 15 | 16 | _name_ 17 | 18 | , 19 | 20 | 21 | 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/accordion/accordion.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/accordion/accordion.css -------------------------------------------------------------------------------- /src/components/accordion/accordion.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-accordion', 5 | styleUrl: 'accordion.css' 6 | }) 7 | export class Accordion { 8 | 9 | render() { 10 | const description = 'Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All ion-accordion components should be grouped inside ion-accordion-group components.'; 11 | const url = 'accordion'; 12 | 13 | return [ 14 | 15 | 16 | 17 | 18 | 19 | Accordion 20 | 21 | , 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Colors 30 | 31 | 32 | 33 | 34 | Red 35 | 36 | 37 | Green 38 | 39 | 40 | Blue 41 | 42 | 43 | 44 | 45 | 46 | Shapes 47 | 48 | 49 | 50 | 51 | Circle 52 | 53 | 54 | Triangle 55 | 56 | 57 | Square 58 | 59 | 60 | 61 | 62 | 63 | Numbers 64 | 65 | 66 | 67 | 68 | 1 69 | 70 | 71 | 2 72 | 73 | 74 | 3 75 | 76 | 77 | 78 | 79 | 80 | ]; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/components/action-sheet/action-sheet.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/action-sheet/action-sheet.css -------------------------------------------------------------------------------- /src/components/action-sheet/action-sheet.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | import { actionSheetController, getMode } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-action-sheet', 7 | styleUrl: 'action-sheet.css' 8 | }) 9 | export class ActionSheet { 10 | mode!: string; 11 | 12 | open = async () => { 13 | const mode = getMode(); 14 | 15 | const actionSheet = await actionSheetController.create({ 16 | header: 'Albums', 17 | buttons: [{ 18 | text: 'Delete', 19 | role: 'destructive', 20 | icon: mode !== 'ios' ? 'trash-outline' : null, 21 | handler: () => { 22 | console.log('Delete clicked'); 23 | } 24 | }, { 25 | text: 'Share', 26 | icon: mode !== 'ios' ? 'share-outline' : null, 27 | handler: () => { 28 | console.log('Share clicked'); 29 | } 30 | }, { 31 | text: 'Play (open modal)', 32 | icon: mode !== 'ios' ? 'play-circle-outline' : null, 33 | handler: () => { 34 | console.log('Play clicked'); 35 | } 36 | }, { 37 | text: 'Favorite', 38 | icon: mode !== 'ios' ? 'heart-outline' : null, 39 | handler: () => { 40 | console.log('Favorite clicked'); 41 | } 42 | }, { 43 | text: 'Cancel', 44 | icon: mode !== 'ios' ? 'close' : null, 45 | role: 'cancel', 46 | handler: () => { 47 | console.log('Cancel clicked'); 48 | } 49 | }] 50 | }); 51 | await actionSheet.present(); 52 | } 53 | 54 | render() { 55 | const description = `The Action Sheet is a dialog that displays a set of options. It appears on 56 | top of the app’s content, and must be manually dismissed by the user before they can 57 | resume interaction with the app. There are multiple ways to dismiss the action sheet, 58 | including tapping the backdrop or hitting the escape key.`; 59 | const url = 'action-sheet'; 60 | 61 | return [ 62 | 63 | 64 | 65 | 66 | 67 | Action Sheet 68 | 69 | , 70 | 71 | 72 | 73 | 74 |
75 | Open Action Sheet 76 |
77 | 78 | ]; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/components/alert/alert.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/alert/alert.css -------------------------------------------------------------------------------- /src/components/alert/alert.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | import { alertController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-alert', 7 | styleUrl: 'alert.css' 8 | }) 9 | export class Alert { 10 | open = async () => { 11 | const alert = await alertController.create({ 12 | header: 'Use this lightsaber?', 13 | message: 'Do you agree to use this lightsaber to do good across the galaxy?', 14 | buttons: ['Disagree', 'Agree'] 15 | }); 16 | await alert.present(); 17 | } 18 | 19 | render() { 20 | const description = `The Alert is a dialog that presents users with information 21 | or collects information from the user via inputs. It appears on top of the app's content, 22 | and must be manually dismissed by the user before they can resume interaction with the app.`; 23 | const url = 'alert'; 24 | 25 | return [ 26 | 27 | 28 | 29 | 30 | 31 | Alert 32 | 33 | , 34 | 35 | 36 | 37 | 38 |
39 | Open Alert 40 |
41 | 42 | ]; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/app-home/app-home.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Lists 3 | */ 4 | 5 | .theme-list ion-item, 6 | .home-list ion-item { 7 | --padding-start: 14px; 8 | --inner-padding-end: 14px; 9 | 10 | --transition: none; 11 | } 12 | 13 | .theme-list, 14 | .home-list { 15 | padding-bottom: 40px !important; 16 | } 17 | 18 | .theme-list ion-toggle { 19 | padding-right: 0; 20 | } 21 | 22 | .home-list { 23 | padding-top: 0 !important; 24 | } 25 | 26 | 27 | /* 28 | * iOS Border is hairline width 29 | */ 30 | 31 | .ios .home-list ion-item:first-child { 32 | --border-width: 0.55px 0 0 0; 33 | } 34 | 35 | .md .home-list ion-item:first-child { 36 | --border-width: 1px 0 0 0; 37 | } 38 | 39 | .ios .home-list ion-item:last-child { 40 | --border-width: 0 0 0.55px 0; 41 | --inner-border-width: 0; 42 | } 43 | 44 | .md .home-list ion-item:last-child { 45 | --border-width: 0 0 1px 0; 46 | --inner-border-width: 0; 47 | } 48 | 49 | 50 | /* 51 | * Component icons 52 | */ 53 | 54 | .component-icon { 55 | border-radius: 50%; 56 | 57 | padding: 7px; 58 | height: 18px; 59 | width: 18px; 60 | 61 | margin-top: 5px; 62 | margin-bottom: 5px; 63 | } 64 | 65 | .component-icon-dark { 66 | background: var(--ion-background-color-step-850, #27323e); 67 | color: var(--ion-item-background, #fff); 68 | } 69 | 70 | .component-icon-primary { 71 | background: var(--ion-color-primary); 72 | color: #fff; 73 | } 74 | -------------------------------------------------------------------------------- /src/components/app-home/app-home.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('app-home', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('app-home'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | 12 | it('contains an Accordion button', async () => { 13 | const page = await newE2EPage(); 14 | await page.setContent(''); 15 | 16 | const element = await page.find('app-home .home-list ion-label'); 17 | expect(element.textContent).toEqual('Accordion'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/components/app-home/app-home.spec.ts: -------------------------------------------------------------------------------- 1 | import { AppHome } from './app-home'; 2 | 3 | describe('app', () => { 4 | it('builds', () => { 5 | expect(new AppHome()).toBeTruthy(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/components/app-home/app-home.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | import { getComponents } from '../../utils/component-utils'; 3 | 4 | @Component({ 5 | tag: 'app-home', 6 | styleUrl: 'app-home.css' 7 | }) 8 | export class AppHome { 9 | components = getComponents(); 10 | 11 | toggleDarkMode = () => { 12 | document.documentElement.classList.toggle('ion-palette-dark'); 13 | } 14 | 15 | render() { 16 | return [ 17 | 18 | 19 | Ionic Framework 20 | 21 | , 22 | 23 | 24 | 25 | 26 | Ionic Framework 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | Dark Mode 35 | 36 | 37 | 38 | 39 | 40 | {this.components.map(component => { 41 | const href = component.id === 'tabs' ? '/component/tabs/music' : `/component/${component.id}`; 42 | 43 | return ( 44 | 45 | 46 | {component.name} 47 | 48 | ); 49 | })} 50 | 51 | 52 | ]; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/app-root/app-root.css: -------------------------------------------------------------------------------- 1 | ion-app { 2 | user-select: none; 3 | } -------------------------------------------------------------------------------- /src/components/app-root/app-root.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('app-root', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage({ url: '/' }); 6 | 7 | const element = await page.find('app-root'); 8 | expect(element).toHaveClass('hydrated'); 9 | }); 10 | 11 | it('renders an ion-app', async () => { 12 | const page = await newE2EPage({ url: '/' }); 13 | 14 | const element = await page.find('app-root > ion-app'); 15 | expect(element).toHaveClass('hydrated'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/app-root/app-root.spec.ts: -------------------------------------------------------------------------------- 1 | import { AppRoot } from './app-root'; 2 | 3 | describe('app-root', () => { 4 | 5 | it('builds', () => { 6 | expect(new AppRoot()).toBeTruthy(); 7 | }); 8 | 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/app-root/app-root.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | import { getComponents } from '../../utils/component-utils'; 3 | 4 | @Component({ 5 | tag: 'app-root', 6 | styleUrl: 'app-root.css' 7 | }) 8 | export class AppRoot { 9 | components = getComponents(); 10 | 11 | render() { 12 | return ( 13 | 14 | 15 | 16 | 17 | {this.components.filter(c => c.name !== 'tabs').map(component => { 18 | return ( 19 | 20 | ); 21 | })} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/avatar/avatar.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/avatar/avatar.css -------------------------------------------------------------------------------- /src/components/avatar/avatar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-avatar', 5 | styleUrl: 'avatar.css' 6 | }) 7 | export class Avatar { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Avatar 16 | 17 | , 18 | 19 | 20 | 21 | 22 | Default 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Chip Avatar 32 | 33 | 34 | 35 | 36 | 37 | 38 | Kit Bishop 39 | 40 | 41 | 42 | 43 | 44 | Item Avatars 45 | 46 | 47 | 48 | 49 | 50 | 51 | Lorem ipsum 52 | 53 | 54 | 55 | 56 | 57 | 58 |

Lorem ipsum

59 |

dolor sit amet

60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |

Lorem ipsum

68 |

dolor sit amet

69 |

consectetur adipiscing elit. Duis ut urna neque.

70 | 71 | 72 | 73 | 74 | 75 | 76 | Lorem ipsum 77 | 78 | 79 | 80 | 81 | 82 | 83 |

Lorem ipsum

84 |

dolor sit amet

85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 |

Lorem ipsum

93 |

dolor sit amet

94 |

consectetur adipiscing elit. Duis ut urna neque.

95 | 96 | 97 | 98 | 99 | ]; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/components/badge/badge.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/badge/badge.css -------------------------------------------------------------------------------- /src/components/badge/badge.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-badge', 5 | styleUrl: 'badge.css' 6 | }) 7 | export class Badge { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Badge 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Badges 24 | 25 | 26 | 27 | Followers 28 | 22k 29 | 30 | 31 | Likes 32 | 118k 33 | 34 | 35 | Stars 36 | 34k 37 | 38 | 39 | Completed 40 | 80 41 | 42 | 43 | Warnings 44 | 70 45 | 46 | 47 | Notifications 48 | 1000 49 | 50 | 51 | Unread 52 | 24 53 | 54 | 55 | Drafts 56 | 14 57 | 58 | 59 | Deleted 60 | 4 61 | 62 | 63 | , 64 | 65 | 66 | 67 | 68 | 69 | 44 70 | 71 | 72 | 73 | 1 74 | 75 | 76 | 77 | 2.3k 78 | 79 | 80 | 81 | ]; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/breadcrumbs/breadcrumbs.css: -------------------------------------------------------------------------------- 1 | ion-breadcrumbs.ios { 2 | padding: 6px 8px; 3 | } 4 | 5 | ion-breadcrumbs.md { 6 | padding: 0 4px; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/breadcrumbs/breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | import { Component, State, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-breadcrumbs', 5 | styleUrl: 'breadcrumbs.css' 6 | }) 7 | export class Breadcrumb { 8 | @State() maxBreadcrumbs = 4; 9 | 10 | private expandBreadcrumbs = () => { 11 | this.maxBreadcrumbs = undefined; 12 | } 13 | 14 | render() { 15 | const description = 'Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.'; 16 | const url = 'breadcrumbs'; 17 | const { maxBreadcrumbs } = this; 18 | 19 | return [ 20 | 21 | 22 | 23 | 24 | 25 | Breadcrumbs 26 | 27 | 28 | this.expandBreadcrumbs()}> 29 | 30 | Home 31 | 32 | 33 | Electronics 34 | 35 | 36 | Photography 37 | 38 | 39 | Cameras 40 | 41 | 42 | Film 43 | 44 | 45 | 35 mm 46 | 47 | 48 | 49 | , 50 | 51 | 52 | 53 | 54 | ]; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/button/button.css: -------------------------------------------------------------------------------- 1 | component-button ion-list-header { 2 | padding-left: 4px; 3 | } 4 | 5 | component-button section { 6 | margin-bottom: 1em; 7 | 8 | padding: 0 10px; 9 | } -------------------------------------------------------------------------------- /src/components/button/button.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-button', 5 | styleUrl: 'button.css' 6 | }) 7 | export class Button { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Button 16 | 17 | , 18 | 19 | 20 |
21 | 22 | 23 | Small Size 24 | 25 | 26 | Default 27 | Secondary 28 | Tertiary 29 |
30 | 31 |
32 | 33 | 34 | Default Size 35 | 36 | 37 | Success 38 | Warning 39 | Danger 40 |
41 | 42 |
43 | 44 | 45 | Large Size 46 | 47 | 48 | Light 49 | Medium 50 | Dark 51 |
52 | 53 |
54 | 55 | 56 | Block Width 57 | 58 | 59 | A block button 60 |
61 | 62 |
63 | 64 | 65 | Full Width 66 | 67 | 68 | A full-width button 69 |
70 | 71 | ]; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/card/card.css: -------------------------------------------------------------------------------- 1 | .ios body.dark component-card { 2 | --ion-item-background: #1c1c1e; 3 | } 4 | 5 | component-card { 6 | --background-darker: var(--ion-background-color-step-200, #e9edf3); 7 | 8 | --text-dark: var(--ion-text-color-step-150, #27323f); 9 | --text-darker: var(--ion-text-color-step-50, #0e151f); 10 | 11 | --text-light: var(--ion-text-color-step-350, #5b708b); 12 | --text-lighter: var(--ion-text-color-step-450, #73849a); 13 | --text-lightest: var(--ion-text-color-step-700, #b2becd); 14 | } 15 | 16 | component-card ion-card .header-img { 17 | width: 100%; 18 | height: 120px; 19 | } 20 | 21 | component-card ion-card ion-card-subtitle { 22 | color: var(--text-lighter); 23 | } 24 | 25 | component-card ion-card ion-card-title { 26 | color: var(--text-darker); 27 | } 28 | 29 | component-card ion-card ion-card-content { 30 | color: var(--text-light); 31 | } 32 | 33 | component-card ion-card ion-list ion-item { 34 | --padding-start: 0; 35 | } 36 | 37 | /* Action Card */ 38 | 39 | component-card .action-card ion-grid { 40 | --ion-grid-column-padding: 0; 41 | 42 | padding: 10px 0 0; 43 | } 44 | 45 | component-card .action-card ion-col:last-child { 46 | text-align: right; 47 | } 48 | 49 | .md component-card .action-card .button-clear { 50 | --background-hover: currentColor; 51 | --background-focused: currentColor; 52 | } 53 | 54 | component-card .action-card .button-clear { 55 | --color: #c6cede; 56 | --border-radius: 50%; 57 | --padding-top: 0; 58 | --padding-end: 0; 59 | --padding-bottom: 0; 60 | --padding-start: 0; 61 | 62 | margin: 0; 63 | 64 | height: 36px; 65 | width: 36px; 66 | } 67 | 68 | /* Apps Card */ 69 | 70 | component-card .apps-card ion-list ion-thumbnail { 71 | margin-top: 5px; 72 | margin-bottom: 5px; 73 | 74 | --border-radius: 14px; 75 | } 76 | 77 | /* Coworker Card */ 78 | 79 | component-card .coworker-card .header-img { 80 | height: 160px; 81 | } 82 | 83 | component-card .coworker-card h1 { 84 | font-weight: 600; 85 | font-size: 1.125rem; 86 | } 87 | 88 | component-card .coworker-card p { 89 | color: var(--text-light); 90 | } 91 | 92 | component-card .coworker-card ion-icon { 93 | align-self: start; 94 | margin-top: 10px; 95 | margin-right: 29px; 96 | 97 | color: var(--text-lightest); 98 | } 99 | 100 | /* Music Card */ 101 | 102 | component-card .music-card ion-card-header, 103 | component-card .music-card ion-card-content { 104 | text-align: center; 105 | } 106 | 107 | component-card .music-card img { 108 | width: 248px; 109 | height: 248px; 110 | 111 | box-shadow: 0px 2px 8px rgba(2, 8, 20, 0.1), 0px 8px 16px rgba(2, 8, 20, 0.08); 112 | border-radius: 6px; 113 | margin: 0 auto; 114 | } 115 | 116 | component-card .music-card h2 { 117 | font-weight: 600; 118 | font-size: 1rem; 119 | 120 | color: var(--text-darker); 121 | } 122 | 123 | component-card .music-card p { 124 | color: var(--text-light); 125 | } 126 | 127 | component-card .music-card ion-button { 128 | --padding-start: 7px; 129 | --padding-end: 7px; 130 | 131 | margin: 0; 132 | } 133 | 134 | component-card .music-card .button-largest { 135 | font-size: 1.75rem; 136 | } 137 | 138 | component-card .music-card ion-progress-bar { 139 | margin: 30px 0 20px; 140 | 141 | --background: var(--background-darker); 142 | --progress-background: var(--text-dark); 143 | } 144 | -------------------------------------------------------------------------------- /src/components/card/card.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-card', 5 | styleUrl: 'card.css' 6 | }) 7 | export class Card { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Card 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Card Subtitle 24 | Card Title 25 | 26 | 27 | Here's a small text description for the card content. Nothing more, nothing less. 28 | 29 | 30 | 31 | Action 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | Your Daily List 49 | Ionic Apps We Think You'll Love. 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |

Sworkit

59 |

The number one fitness app

60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |

Untappd

68 |

Discover and share beer

69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |

Shipt

77 |

Bring the store to your door

78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |

Amtrak

86 |

Book a trip today

87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |

John Parks

103 |

Co-worker

104 | 105 | 106 | 107 | 108 | 109 |

(555) 418-5602

110 |

Mobile phone

111 | 112 | 113 | 114 | 115 | 116 |

jparks@workmail.com

117 |

Work email

118 | 119 | 120 | 121 | 122 | 123 |

john.parks92@email.com

124 |

Personal email

125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |

29 #Strafford APTS

137 |

Bon Iver — 22, A Million

138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | Destination 163 | Madison, WI 164 | 165 | 166 | Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836. 167 | 168 | 169 | 170 | ]; 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/checkbox/checkbox.css -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-checkbox', 5 | styleUrl: 'checkbox.css' 6 | }) 7 | export class Checkbox { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Checkbox 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Characters 24 | 25 | 26 | 27 | Jon Snow 28 | 29 | 30 | Daenerys Targaryen 31 | 32 | 33 | Arya Stark 34 | 35 | 36 | Tyrion Lannister 37 | 38 | 39 | Sansa Stark 40 | 41 | 42 | Khal Drogo 43 | 44 | 45 | Cersei Lannister 46 | 47 | 48 | Stannis Baratheon 49 | 50 | 51 | Petyr Baelish 52 | 53 | 54 | Hodor 55 | 56 | 57 | Catelyn Stark 58 | 59 | 60 | Bronn 61 | 62 | 63 | 64 | ]; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/chip/chip.css: -------------------------------------------------------------------------------- 1 | component-chip .ios p { 2 | margin-left: 16px; 3 | } 4 | 5 | component-chip .md p { 6 | margin-top: 0; 7 | margin-left: 10px; 8 | } -------------------------------------------------------------------------------- /src/components/chip/chip.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-chip', 5 | styleUrl: 'chip.css' 6 | }) 7 | export class Chip { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Chip 16 | 17 | , 18 | 19 | 20 | 21 | 22 | Basic 23 | 24 | 25 |
26 | 27 | Default 28 | 29 | 30 | 31 | Icon 32 | 33 | 34 | 35 | 36 | 37 | Avatar 38 | 39 |
40 | 41 | 42 | 43 | Colors 44 | 45 | 46 |
47 | 48 | Primary 49 | 50 | 51 | Secondary 52 | 53 | 54 | Tertiary 55 | 56 | 57 | Success 58 | 59 | 60 | Warning 61 | 62 | 63 | Danger 64 | 65 |
66 | 67 | 68 | 69 | Outline 70 | 71 | 72 |
73 | 74 | Primary 75 | 76 | 77 | Secondary 78 | 79 | 80 | Tertiary 81 | 82 | 83 | Success 84 | 85 | 86 | Warning 87 | 88 | 89 | Danger 90 | 91 |
92 | 93 | 94 | 95 | Icons 96 | 97 | 98 |
99 | 100 | 101 | Madison 102 | 103 | 104 | 105 | 106 | Nightlife 107 | 108 | 109 | 110 | 111 | Dining 112 | 113 | 114 | 115 | 116 | Entertainment 117 | 118 | 119 |
120 | 121 | ]; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/components/component-details/component-details.css: -------------------------------------------------------------------------------- 1 | component-details ion-list { 2 | padding-bottom: 0 !important; 3 | margin-bottom: 26px !important; 4 | } 5 | 6 | component-details .item .component-description { 7 | color: var(--ion-text-color-step-200, #3e4a58); 8 | font-size: 1.125rem; 9 | line-height: 1.4; 10 | white-space: normal; 11 | padding-bottom: 16px; 12 | } 13 | 14 | component-details .item .component-description b { 15 | color: var(--ion-text-color, #000); 16 | font-weight: 450; 17 | } 18 | 19 | component-details .component-link { 20 | text-transform: capitalize; 21 | 22 | font-size: 1rem; 23 | } 24 | -------------------------------------------------------------------------------- /src/components/component-details/component-details.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Prop, h } from '@stencil/core'; 2 | import { _template_ } from '../_template_/_template_'; 3 | 4 | @Component({ 5 | tag: 'component-details', 6 | styleUrl: 'component-details.css' 7 | }) 8 | /** 9 | * This component is useful for providing a top section in the component page 10 | * to describe what the component is and link to the Component & API docs. 11 | */ 12 | export class ComponentDetails { 13 | @Prop() description: string; 14 | 15 | @Prop() url: string; 16 | 17 | render() { 18 | const { url, description } = this; 19 | 20 | const name = url.replace('-', ' '); 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | { name } API Docs 32 | 33 | 34 | 35 | 36 | UI Component Docs 37 | 38 | 39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/content/content.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/content/content.css -------------------------------------------------------------------------------- /src/components/content/content.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-content', 5 | styleUrl: 'content.css' 6 | }) 7 | export class Content { 8 | @Element() el; 9 | 10 | getContent() { 11 | return this.el.querySelector('ion-content'); 12 | } 13 | 14 | scrollToBottom = () => { 15 | this.getContent().scrollToBottom(500); 16 | } 17 | 18 | scrollToTop = () => { 19 | this.getContent().scrollToTop(500); 20 | } 21 | 22 | render() { 23 | return [ 24 | 25 | 26 | 27 | 28 | 29 | Content 30 | 31 | , 32 | 33 | 34 |

35 | Scroll To Bottom 36 |

37 | {new Array(30).fill(0).map((_, i) => { 38 | return ( 39 | 40 | Item {i} 41 | 42 | ); 43 | })} 44 |

45 | Scroll To Top 46 |

47 | 48 | ]; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/datetime/datetime.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); 4 | grid-gap: 0 10px; 5 | } 6 | 7 | ion-accordion .ion-accordion-toggle-icon { 8 | display: none; 9 | } 10 | 11 | ion-datetime.ios { 12 | --background: var(--ion-background-color, #ffffff); 13 | } 14 | 15 | component-datetime ion-note { 16 | font-size: inherit; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/datetime/datetime.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-datetime', 5 | styleUrl: 'datetime.css' 6 | }) 7 | export class Datetime { 8 | 9 | render() { 10 | const description = 'Datetime presents a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native input elements of datetime-local, however, Ionic\'s Datetime component makes it easy to display the date and time in the a preferred format, and manage the datetime values.'; 11 | const url = 'datetime'; 12 | 13 | return [ 14 | 15 | 16 | 17 | 18 | 19 | Date & Time Picker 20 | 21 | , 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | Starts 40 | 41 | 42 | 43 | 44 | 45 | 46 | Ends 47 | 48 | 49 | 50 | 51 | 52 | 53 | Repeat 54 | Never 55 | 56 | 57 | Travel Time 58 | None 59 | 60 | 61 | Alert 62 | None 63 | 64 | 65 | 66 | ]; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/components/fab/fab.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/fab/fab.css -------------------------------------------------------------------------------- /src/components/fab/fab.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-fab', 5 | styleUrl: 'fab.css' 6 | }) 7 | export class Fab { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Floating Action Button 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | ]; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/components/grid/grid.css: -------------------------------------------------------------------------------- 1 | ion-col > div { 2 | background-color: #f7f7f7; 3 | border: solid 1px #ddd; 4 | padding: 10px; 5 | } -------------------------------------------------------------------------------- /src/components/grid/grid.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-grid', 5 | styleUrl: 'grid.css' 6 | }) 7 | export class Grid { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Grid 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 |
1 of 2
24 | 25 | 26 |
2 of 2
27 | 28 | 29 | 30 | 31 |
1 of 3
32 | 33 | 34 |
2 of 3
35 | 36 | 37 |
3 of 3
38 | 39 | 40 | 41 | 42 |
1 of 3
43 | 44 | 45 |
2 of 3
46 | 47 | 48 |
3 of 3
49 | 50 | 51 | 52 | 53 |
1 of 3
54 | 55 | 56 |
2 of 3
57 | 58 | 59 |
3 of 3
60 | 61 | 62 | 63 | 64 |
1 of 2
65 | 66 | 67 |
2 of 2
68 | 69 | 70 | 71 | 72 |
1 of 2
73 | 74 | 75 |
2 of 2
76 | 77 | 78 | 79 | 80 |
1 of 4
81 | 82 | 83 |
2 of 4
84 | 85 | 86 |
3 of 4
87 | 88 | 89 |
4 of 4
90 | 91 | 92 | 93 | 94 | ]; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/components/icons/icons.css: -------------------------------------------------------------------------------- 1 | component-icons ion-icon { 2 | font-size: 2.25rem; 3 | margin: 3px; 4 | 5 | color: var(--ion-text-color-step-350, #444); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/icons/icons.tsx: -------------------------------------------------------------------------------- 1 | import { Component, State, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-icons', 5 | styleUrl: 'icons.css' 6 | }) 7 | export class Icons { 8 | @State() segment = ''; 9 | 10 | updateSegment(ev) { 11 | this.segment = ev.detail.value; 12 | } 13 | 14 | render() { 15 | const { segment } = this; 16 | 17 | return [ 18 | 19 | 20 | 21 | 22 | 23 | Icons 24 | 25 | 26 | this.updateSegment(ev)}> 27 | Outline 28 | Filled 29 | Sharp 30 | 31 | 32 | , 33 | 34 | 35 | {/* Logo icons never change fill */} 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | {/* All other icons */} 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | ]; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/components/infinite-scroll/infinite-scroll.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/infinite-scroll/infinite-scroll.css -------------------------------------------------------------------------------- /src/components/infinite-scroll/infinite-scroll.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, State, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-infinite-scroll', 5 | styleUrl: 'infinite-scroll.css' 6 | }) 7 | export class InfiniteScroll { 8 | users = [{ 9 | 'name': 'Aline Grover', 10 | 'created': 'November 28, 2012' 11 | }, { 12 | 'name': 'Nevada Anders', 13 | 'created': 'January 18, 2014' 14 | }, { 15 | 'name': 'Nicholas Morissette', 16 | 'created': 'November 11, 2014' 17 | }, { 18 | 'name': 'Rusty Umland', 19 | 'created': 'January 8, 2019' 20 | }, { 21 | 'name': 'Amada Cerulli', 22 | 'created': 'July 22, 2009' 23 | }, { 24 | 'name': 'Harriette Garcia', 25 | 'created': 'July 29, 2018' 26 | }, { 27 | 'name': 'Erminia Marotz', 28 | 'created': 'September 29, 2016' 29 | }, { 30 | 'name': 'Shanelle Parodi', 31 | 'created': 'May 26, 2018' 32 | }, { 33 | 'name': 'Roger Leite', 34 | 'created': 'August 6, 2015' 35 | }, { 36 | 'name': 'Latina Faulcon', 37 | 'created': 'February 5, 2014' 38 | }, { 39 | 'name': 'Jerrie Hoekstra', 40 | 'created': 'June 2, 2016' 41 | }, { 42 | 'name': 'Domonique Byam', 43 | 'created': 'December 30, 2010' 44 | }, { 45 | 'name': 'Monnie Bonar', 46 | 'created': 'December 20, 2018' 47 | }, { 48 | 'name': 'Chu Kahle', 49 | 'created': 'November 17, 2017' 50 | }, { 51 | 'name': 'Allan Passman', 52 | 'created': 'November 12, 2015' 53 | }, { 54 | 'name': 'Conrad Caliendo', 55 | 'created': 'February 10, 2016' 56 | }, { 57 | 'name': 'Elma Chenier', 58 | 'created': 'August 13, 2011' 59 | }, { 60 | 'name': 'Wendi Hirano', 61 | 'created': 'July 27, 2018' 62 | }, { 63 | 'name': 'Loren Wordlaw', 64 | 'created': 'December 20, 2014' 65 | }, { 66 | 'name': 'Hubert Frum', 67 | 'created': 'January 21, 2013' 68 | }, { 69 | 'name': 'Rueben Basil', 70 | 'created': 'December 2, 2013' 71 | }, { 72 | 'name': 'Krystyna Hardiman', 73 | 'created': 'February 11, 2016' 74 | }, { 75 | 'name': 'Micki Murch', 76 | 'created': 'December 17, 2009' 77 | }, { 78 | 'name': 'Allene Knight', 79 | 'created': 'November 3, 2010' 80 | }, { 81 | 'name': 'Davis Lunsford', 82 | 'created': 'October 17, 2011' 83 | }, { 84 | 'name': 'Elin Conte', 85 | 'created': 'June 23, 2015' 86 | }, { 87 | 'name': 'Yasuko Hites', 88 | 'created': 'August 25, 2017' 89 | }, { 90 | 'name': 'Gerri Pinon', 91 | 'created': 'May 21, 2014' 92 | }, { 93 | 'name': 'Caryl Hawker', 94 | 'created': 'April 13, 2018' 95 | }, { 96 | 'name': 'Savannah Hoard', 97 | 'created': 'October 31, 2009' 98 | }, { 99 | 'name': 'Carolyn Knutsen', 100 | 'created': 'July 16, 2015' 101 | }, { 102 | 'name': 'Shantay Mckissack', 103 | 'created': 'July 9, 2010' 104 | }, { 105 | 'name': 'Vertie Pinales', 106 | 'created': 'November 20, 2010' 107 | }, { 108 | 'name': 'Gidget Stuck', 109 | 'created': 'August 17, 2017' 110 | }, { 111 | 'name': 'Drew Crownover', 112 | 'created': 'August 30, 2017' 113 | }, { 114 | 'name': 'Vashti Krajewski', 115 | 'created': 'January 25, 2018' 116 | }, { 117 | 'name': 'Candice Dike', 118 | 'created': 'November 19, 2018' 119 | }, { 120 | 'name': 'Dorthey Buhler', 121 | 'created': 'October 22, 2012' 122 | }, { 123 | 'name': 'Hailey Deluna', 124 | 'created': 'September 13, 2012' 125 | }, { 126 | 'name': 'Richard Aaron', 127 | 'created': 'April 27, 2016' 128 | }]; 129 | 130 | @Element() el; 131 | 132 | @State() items = this.users.slice(0, 15); 133 | 134 | infiniteScroll: HTMLIonInfiniteScrollElement; 135 | 136 | handleInfinite = async () => { 137 | await this.wait(500); 138 | 139 | const newUsers = []; 140 | for (let i = 0; i < 5; i++) { 141 | newUsers.push(this.users[Math.floor(Math.random() * this.users.length)]); 142 | } 143 | this.items = [...this.items, ...newUsers]; 144 | this.infiniteScroll.complete(); 145 | } 146 | 147 | wait = (time): Promise => { 148 | return new Promise(resolve => { 149 | setTimeout(() => { 150 | resolve(); 151 | }, time); 152 | }); 153 | } 154 | 155 | render() { 156 | return [ 157 | 158 | 159 | 160 | 161 | 162 | Infinite Scroll 163 | 164 | , 165 | 166 | 167 | 168 | {this.items.map((user, i) => { 169 | return ( 170 | 171 | 172 | 173 | 174 | 175 |

{user.name}

176 |

177 | Created {user.created} 178 |

179 | 180 | 181 | ); 182 | })} 183 | 184 | 185 | { this.infiniteScroll = e }}> 190 | 191 | 192 | 193 | 194 | ]; 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /src/components/input/input.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/input/input.css -------------------------------------------------------------------------------- /src/components/input/input.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, State, h } from '@stencil/core'; 2 | 3 | import { alertController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-input', 7 | styleUrl: 'input.css' 8 | }) 9 | export class Input { 10 | @Element() el; 11 | 12 | @State() firstName: string; 13 | @State() lastName: string; 14 | 15 | processForm = async (event) => { 16 | event.preventDefault(); 17 | 18 | const alert = await alertController.create({ 19 | header: 'Account Created', 20 | message: `Created account for: ${this.firstName} ${this.lastName}`, 21 | buttons: [{ 22 | text: 'OK' 23 | }] 24 | }) 25 | 26 | alert.present(); 27 | } 28 | 29 | render() { 30 | return [ 31 | 32 | 33 | 34 | 35 | 36 | Input 37 | 38 | , 39 | 40 | 41 |
42 | 43 | 44 | First Name * 45 | { this.firstName = e.target.value}} value={this.firstName}> 46 | 47 | 48 | 49 | Last Name * 50 | { this.lastName = e.target.value}} value={this.lastName}> 51 | 52 | 53 | 54 | Address 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 | Create account 69 |
70 |
71 | , 72 | ]; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/components/item-group/item-group.css: -------------------------------------------------------------------------------- 1 | component-item-group ion-list { 2 | margin-bottom: var(--ion-margin, 20px); 3 | } 4 | 5 | .ios component-item-group ion-item:last-of-type { 6 | --inner-border-width: 0; 7 | } 8 | 9 | .md component-item-group ion-item:last-of-type { 10 | --inner-border-width: 0; 11 | --border-width: 0 0 1px 0; 12 | } -------------------------------------------------------------------------------- /src/components/item-group/item-group.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-item-group', 5 | styleUrl: 'item-group.css' 6 | }) 7 | export class ItemGroup { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Item Group 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | A 24 | 25 | 26 | 27 | Abigail 28 | 29 | 30 | 31 | Jesse Adams 32 | 33 | 34 | 35 | Alan 36 | 37 | 38 | 39 | 40 | 41 | B 42 | 43 | 44 | 45 | James Bach 46 | 47 | 48 | 49 | Flora Ball 50 | 51 | 52 | 53 | London Black 54 | 55 | 56 | 57 | Alisha Brady 58 | 59 | 60 | 61 | Brianna 62 | 63 | 64 | 65 | Monica Brown 66 | 67 | 68 | 69 | 70 | 71 | C 72 | 73 | 74 | 75 | Carla 76 | 77 | 78 | 79 | Brian Clark 80 | 81 | 82 | 83 | Robert Cline 84 | 85 | 86 | 87 | 88 | ]; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/components/item/item.css: -------------------------------------------------------------------------------- 1 | component-item ion-list:last-of-type { 2 | margin-bottom: var(--ion-margin, 20px); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/item/item.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-item', 5 | styleUrl: 'item.css' 6 | }) 7 | export class Item { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Item 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Icon Items 24 | 25 | 26 | 27 | 28 | 29 | Label 30 | 31 | 32 | 33 | 34 | Label 35 | 36 | 37 | 38 | 39 | 40 | 41 | Media Items 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | Label 50 | 51 | 52 | 53 | 54 | 55 | 56 | Label 57 | 58 | 59 | 60 | 61 | 62 | 63 | Sliding Items 64 | 65 | 66 | 67 | 68 | 69 | Label 70 | 71 | 72 | 73 | Archive 74 | 75 | 76 | 77 | Delete 78 | 79 | 80 | 81 | 82 | 83 | Label 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | Inputs & Controls 104 | 105 | 106 | 107 | 108 | 109 | Note 110 | 99 111 | 112 | 113 | 114 | Checkbox 115 | 116 | 117 | 118 | Toggle 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | ]; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/components/list/list.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/list/list.css -------------------------------------------------------------------------------- /src/components/list/list.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-list', 5 | styleUrl: 'list.css' 6 | }) 7 | export class List { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | List 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Recent Conversations 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |

Finn

33 |

I'm a big deal

34 |

Listen, I've had a pretty messed up day...

35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |

Han

44 |

Look, kid...

45 |

I've got enough on my plate as it is, and I...

46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |

Rey

55 |

I can handle myself

56 |

You will remove these restraints and leave...

57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |

Luke

66 |

Your thoughts betray you

67 |

I feel the good in you, the conflict...

68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | Online 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |

Poe

85 |

New Ride

86 |

I just upgraded my X-Wing. Next time...

87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |

Ben

96 |

Move Along

97 |

These aren't the droids you're looking for...

98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |

Leia

107 |

You're My Only Hope

108 |

I've placed information vital to the survival...

109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 |

Yoda

118 |

Size matters not

119 |

Do or do not. There is no try...

120 | 121 | 122 | 123 | 124 | ]; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/components/loading/loading.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/loading/loading.css -------------------------------------------------------------------------------- /src/components/loading/loading.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | 3 | import { loadingController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-loading', 7 | styleUrl: 'loading.css' 8 | }) 9 | export class Loading { 10 | @Element() el; 11 | 12 | handleButtonClick = async () => { 13 | const loading = await loadingController.create({ 14 | message: 'Please wait...', 15 | duration: 3000 16 | }); 17 | 18 | loading.present(); 19 | } 20 | 21 | render() { 22 | const description = `The Loading overlay can be used to indicate activity 23 | while blocking user interaction. It appears on top of the app's content, and can be 24 | dismissed by the app to resume user interaction with the app.`; 25 | const url = 'loading'; 26 | 27 | return [ 28 | 29 | 30 | 31 | 32 | 33 | Loading 34 | 35 | , 36 | 37 | 38 | 39 | 40 |
41 | Open Loading 42 |
43 | 44 | ]; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/menu/menu.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/menu/menu.css -------------------------------------------------------------------------------- /src/components/menu/menu.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | 3 | import { menuController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-menu', 7 | styleUrl: 'menu.css' 8 | }) 9 | export class Menu { 10 | @Element() el; 11 | 12 | openMenu = async () => { 13 | menuController.open(); 14 | } 15 | 16 | render() { 17 | return [ 18 | 19 | 20 | 21 | Menu 22 | 23 | 24 | 25 | 26 | 27 | 28 | Home 29 | 30 | 31 | 32 | Profile 33 | 34 | 35 | 36 | Messages 37 | 38 | 39 | 40 | Settings 41 | 42 | 43 | 44 | , 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | Home 53 | 54 | 55 | 56 | Open Menu 57 | 58 |
59 | ] 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/modal/modal-content.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | import { modalController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-modal-content', 7 | }) 8 | export class ModalContent { 9 | dismiss = () => { 10 | modalController.dismiss(); 11 | } 12 | 13 | render() { 14 | return [ 15 | 16 | 17 | 18 | Cancel 19 | 20 | Contacts 21 | 22 | 23 | 24 | 25 | 26 | 27 | , 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |

Gollum

36 |

Sneaky little hobbitses!

37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |

Frodo

45 |

Go back, Sam! I'm going to Mordor alone!

46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |

Samwise

54 |

What we need is a few good taters.

55 | 56 | 57 | 58 | 59 | ] 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/modal/modal.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/modal/modal.css -------------------------------------------------------------------------------- /src/components/modal/modal.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | import { modalController, ModalOptions } from '@ionic/core'; 3 | 4 | @Component({ 5 | tag: 'component-modal', 6 | styleUrl: 'modal.css' 7 | }) 8 | export class Modal { 9 | currentModal: HTMLIonModalElement; 10 | 11 | @Element() el: any; 12 | 13 | openModal = async (opts: Partial = {}) => { 14 | const modal = await modalController.create({ 15 | component: 'component-modal-content', 16 | ...opts 17 | }); 18 | modal.present(); 19 | this.currentModal = modal; 20 | } 21 | 22 | private openDefaultModal = () => { 23 | this.openModal(); 24 | } 25 | 26 | private openSheetModal = () => { 27 | this.openModal({ 28 | breakpoints: [0, 0.2, 0.5, 1], 29 | initialBreakpoint: 0.2 30 | }) 31 | } 32 | 33 | private openCardModal = () => { 34 | this.openModal({ 35 | presentingElement: this.el 36 | }) 37 | } 38 | 39 | render() { 40 | const description = `The Modal is a dialog that appears on top of the app's 41 | content, and must be dismissed by the user before interaction can resume. It is 42 | useful as a select component when there are a lot of options to choose from, or when 43 | filtering items in a list, as well as many other use cases.`; 44 | const url = 'modal'; 45 | 46 | return [ 47 | 48 | 49 | 50 | 51 | 52 | Modal 53 | 54 | , 55 | 56 | 57 | 58 | 59 |
60 | Open Modal 61 | Open Card Modal 62 | Open Sheet Modal 63 |
64 | 65 | ]; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/components/nav/nav.css: -------------------------------------------------------------------------------- 1 | component-nav p:first-of-type { 2 | margin-top: 0; 3 | } 4 | 5 | component-nav p:last-of-type { 6 | margin-bottom: 0; 7 | } 8 | 9 | component-nav p { 10 | color: var(--ion-text-color-step-200, #3e4a58); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/nav/nav.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-nav', 5 | styleUrl: 'nav.css' 6 | }) 7 | export class Nav { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Navigation 16 | 17 | , 18 | 19 | 20 |
21 |

22 | Traditional web apps use a linear history, meaning that the user navigates 23 | forward to a page and can hit the back button to navigate back. 24 |

25 | 26 |

27 | In contrast, mobile apps often utilize parallel, "non-linear" navigation. 28 | For example, a tabbed interface can have separate navigation stacks for each tab, 29 | making sure the user never loses their place as they navigate and switch between 30 | tabs. 31 |

32 | 33 |

34 | Ionic Framework embraces the latter approach, supporting parallel navigation 35 | histories that can also be nested, all while maintaining the familiar browser-style 36 | navigation concepts web developers are familiar with. 37 |

38 | 39 |

40 | The implementation details for navigating in Ionic Framework varies between the 41 | different frameworks. View the navigation guide for each framework below. 42 |

43 |
44 | 45 | 46 | 47 | 48 | Angular Navigation 49 | 50 | 51 | 52 | 53 | React Navigation 54 | 55 | 56 | 57 | 58 | Vue Navigation 59 | 60 | 61 | 62 | 63 | ]; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/note/note.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/note/note.css -------------------------------------------------------------------------------- /src/components/note/note.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-note', 5 | styleUrl: 'note.css' 6 | }) 7 | export class Note { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Note 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | List Notes 24 | 25 | 26 | 27 | Default 28 | 11 29 | 30 | 31 | 32 | Primary 33 | 22 34 | 35 | 36 | 37 | Secondary 38 | 33 39 | 40 | 41 | 42 | Tertiary 43 | 44 44 | 45 | 46 | 47 | Success 48 | 55 49 | 50 | 51 | 52 | Warning 53 | 66 54 | 55 | 56 | 57 | Danger 58 | 77 59 | 60 | 61 | 62 | Dark 63 | 88 64 | 65 | 66 | 67 | ]; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/picker/picker.css: -------------------------------------------------------------------------------- 1 | ion-modal { 2 | --height: auto; 3 | 4 | align-items: end; 5 | } 6 | 7 | ion-modal ion-picker { 8 | margin-bottom: var(--ion-safe-area-bottom); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/picker/picker.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-picker', 5 | styleUrl: 'picker.css' 6 | }) 7 | export class Picker { 8 | @Element() el!: HTMLElement; 9 | 10 | defaultColumnOptions = [ 11 | [ 12 | 'Dog', 13 | 'Cat', 14 | 'Bird', 15 | 'Lizard', 16 | 'Chinchilla' 17 | ] 18 | ] 19 | 20 | multiColumnOptions = [ 21 | [ 22 | 'Minified', 23 | 'Responsive', 24 | 'Full Stack', 25 | 'Mobile First', 26 | 'Serverless' 27 | ], 28 | [ 29 | 'Tomato', 30 | 'Avocado', 31 | 'Onion', 32 | 'Potato', 33 | 'Artichoke' 34 | ] 35 | ] 36 | 37 | dismissOverlay() { 38 | document.querySelector('ion-modal').dismiss(); 39 | } 40 | 41 | render() { 42 | const description = 'The Picker is a dialog that displays columns with options in each column. It appears inline with your page content, but it can also be displayed over your content by using a Modal or a Popover.'; 43 | const url = 'picker'; 44 | 45 | return [ 46 | 47 | 48 | 49 | 50 | 51 | Picker 52 | 53 | , 54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | { this.defaultColumnOptions.map((c) => { 62 | return ( 63 | 64 | { c.map((o) => { 65 | return ( 66 | {o} 67 | ) 68 | })} 69 | 70 | ) 71 | })} 72 | 73 | 74 | Open Picker in a Modal 75 | 76 | 77 | 78 | 79 | this.dismissOverlay()}>Cancel 80 | 81 | 82 | this.dismissOverlay()}>Done 83 | 84 | 85 | 86 | { this.multiColumnOptions.map((c) => { 87 | return ( 88 | 89 | { c.map((o) => { 90 | return ( 91 | {o} 92 | ) 93 | })} 94 | 95 | ) 96 | })} 97 | 98 | 99 |
100 | 101 | ]; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/components/popover/popover-example-page.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'popover-example-page' 5 | }) 6 | export class PopoverExamplePage { 7 | render() { 8 | return ( 9 | 10 | 11 | Ionic 12 | 13 | Learn Ionic 14 | Documentation 15 | Showcase 16 | GitHub Repo 17 | 18 | ) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/popover/popover.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/popover/popover.css -------------------------------------------------------------------------------- /src/components/popover/popover.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | 3 | import { popoverController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-popover', 7 | styleUrl: 'popover.css' 8 | }) 9 | export class Popover { 10 | @Element() el; 11 | 12 | showPopover = async (event: MouseEvent) => { 13 | const popover = await popoverController.create({ 14 | component: 'popover-example-page', 15 | event, 16 | translucent: true 17 | }); 18 | return popover.present(); 19 | } 20 | 21 | render() { 22 | const description = `The Popover is a dialog that appears on top of the current 23 | page. It can be used for anything, but generally it is used for overflow actions that don't 24 | fit in the navigation bar.`; 25 | const url = 'popover'; 26 | 27 | return [ 28 | 29 | 30 | 31 | 32 | 33 | Popover 34 | 35 | 36 | 37 | 38 | 39 | 40 | , 41 | 42 | 43 | 44 | 45 |
46 | Open Popover 47 |
48 | 49 | ]; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/progress/progress.css: -------------------------------------------------------------------------------- 1 | component-progress ion-content ion-progress-bar { 2 | margin: 10px 0; 3 | } 4 | 5 | component-progress .progress-margin { 6 | margin-bottom: 40px; 7 | } -------------------------------------------------------------------------------- /src/components/progress/progress.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-progress', 5 | styleUrl: 'progress.css' 6 | }) 7 | export class Progress { 8 | progressEl: HTMLIonProgressBarElement; 9 | 10 | increaseValue() { 11 | const value = this.progressEl.value; 12 | 13 | this.progressEl.value = value + .1; 14 | } 15 | 16 | render() { 17 | return [ 18 | 19 | 20 | 21 | 22 | 23 | Progress 24 | 25 | 26 | , 27 | 28 | 29 | 30 | 31 | Determinate 32 | 33 | 34 | 35 | 36 | 37 | 38 | Control Determinate 39 | this.increaseValue()}> 40 | 41 | 42 | 43 | this.progressEl = el} value={0.1}> 44 | 45 | 46 | 47 | 48 | 49 | 50 | Indeterminate 51 | 52 | 53 | 54 | 55 | 56 | 57 | Indeterminate (reversed) 58 | 59 | 60 | 61 | 62 | 63 | 64 | Buffer 65 | 66 | 67 | 68 | 69 | 70 | Colors 71 | 72 | 73 | 74 | 75 | 76 | 77 | ]; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/radio/radio.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/radio/radio.css -------------------------------------------------------------------------------- /src/components/radio/radio.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-radio', 5 | styleUrl: 'radio.css' 6 | }) 7 | export class Radio { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Radio 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Fruit 24 | 25 | 26 | Apple 27 | 28 | 29 | 30 | Grape 31 | 32 | 33 | 34 | Cherry 35 | 36 | 37 | 38 | 39 | 40 | Pizza Topping 41 | 42 | 43 | Beef 44 | 45 | 46 | 47 | Anchovies 48 | 49 | 50 | 51 | Sausage 52 | 53 | 54 | 55 | Bellpepper 56 | 57 | 58 | 59 | Tomato 60 | 61 | 62 | 63 | Pepperoni 64 | 65 | 66 | 67 | 68 | ]; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/range/range.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/range/range.css -------------------------------------------------------------------------------- /src/components/range/range.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-range', 5 | styleUrl: 'range.css' 6 | }) 7 | export class Range { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Range 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Adjust Display 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | ]; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/refresher/refresher.css: -------------------------------------------------------------------------------- 1 | component-refresher ion-content { 2 | user-select: none; 3 | } 4 | 5 | component-refresher ion-item { 6 | --padding-start: 8px; 7 | } 8 | 9 | component-refresher .dot { 10 | display: block; 11 | height: 10px; 12 | width: 10px; 13 | border-radius: 50%; 14 | align-self: start; 15 | margin: 16px 8px 16px 9px; 16 | } 17 | 18 | component-refresher .md .dot { 19 | margin-top: 17px; 20 | } 21 | 22 | component-refresher .dot-unread { 23 | background: var(--ion-color-primary); 24 | } 25 | 26 | component-refresher .unread { 27 | background-color: #3684ff; 28 | } 29 | 30 | component-refresher ion-item h2, 31 | component-refresher ion-item h3 { 32 | font-weight: 500 !important; 33 | } -------------------------------------------------------------------------------- /src/components/refresher/refresher.tsx: -------------------------------------------------------------------------------- 1 | import { Component, State, h } from '@stencil/core'; 2 | 3 | const authors = [ 4 | 'Everyworse', 5 | 'Nextably', 6 | 'Givester', 7 | 'TempleRentr', 8 | 'Spout', 9 | 'Frigital', 10 | 'Batterbus', 11 | 'Ham Pot', 12 | 'Bat+IQ', 13 | 'Throbe' 14 | ]; 15 | 16 | const titles = [ 17 | 'Get 50% off your purchase today!', 18 | 'You\'re in luck, here\'s your Friday the 13th deal!', 19 | 'Don\'t miss out! Your exclusive access to FREE shipping is ending soon.', 20 | 'Treat yourself, you deserve these savings.', 21 | 'Get fresh meals delivered right to your door!', 22 | 'Your 25% Coupon Expires At Midnight', 23 | 'BIG SAVINGS Up To 50% Until Friday', 24 | 'Lucky you: Save today', 25 | 'The Event You Don\'t Want to Miss', 26 | 'Last Chance to Unlock Your 25% Code', 27 | 'CLOSEOUT SALE (We mean it!)', 28 | 'Gifting just got easier — enjoy exclusive access to FREE shipping for two days only.', 29 | 'Our Birthday = Your Savings', 30 | 'SPECIAL OFFER. See inside.', 31 | 'Ready to order?', 32 | 'BONUS Coupon Inside!', 33 | 'Today\'s SPECIAL BUY >> Inside >>', 34 | 'Email Exclusive Offer ENDS TONIGHT!' 35 | ]; 36 | 37 | const messages = [ 38 | 'The best brands + the best deals', 39 | 'Recommended by your Personal Vacation Planner', 40 | 'Catch them before they\'re gone.', 41 | 'Shop by tonight to save on gifts to share with the entire family.', 42 | 'Over 30% OFF! View in Browser.', 43 | 'Offer expires 11:59 PM ET. View in Browser.', 44 | 'Free delivery will make us the MPV!', 45 | 'Selection √ | Value √ | Service √', 46 | '⭐️⭐️⭐️⭐️⭐️', 47 | 'Shop now and save big...', 48 | 'Get the Lowest Price Guaranteed', 49 | 'Use code SAVE10 to save 10% on your next purchase.', 50 | 'Unlock your coupon code now...', 51 | 'Free Shipping Tonight!', 52 | 'Free Shipping On All Orders $35+', 53 | 'Better than takeout in every way', 54 | 'Get $100 off when you try now!', 55 | 'All your favorites are heading your way.', 56 | 57 | ]; 58 | 59 | const createItems = (count: number, unread = false) => { 60 | return new Array(count).fill(0).map(_ => { 61 | return { 62 | email: { 63 | author: authors[Math.floor(Math.random() * authors.length)], 64 | title: titles[Math.floor(Math.random() * titles.length)], 65 | message: messages[Math.floor(Math.random() * messages.length)], 66 | }, 67 | unread 68 | } 69 | }); 70 | } 71 | 72 | 73 | @Component({ 74 | tag: 'component-refresher', 75 | styleUrl: 'refresher.css' 76 | }) 77 | export class Refresher { 78 | refresher: HTMLIonRefresherElement; 79 | 80 | @State() items = createItems(5); 81 | 82 | handleRefresh = (ev: CustomEvent) => { 83 | setTimeout(() => { 84 | this.items = [...createItems(2, true), ...this.items]; 85 | (ev.target as HTMLIonRefresherElement).complete(); 86 | }, 1000); 87 | } 88 | 89 | render() { 90 | return [ 91 | 92 | 93 | 94 | 95 | 96 | Refresher 97 | 98 | , 99 | 100 | 101 | this.handleRefresh(ev)}> 102 | 103 | 104 | 105 | {this.items.map(({ unread, email }: any) => { 106 | return ( 107 | 108 |
109 | 110 |

{email.author}

111 |

{email.title}

112 |

{email.message}

113 | 114 | 115 | ); 116 | })} 117 | 118 | 119 | ]; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/components/reorder/reorder.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/reorder/reorder.css -------------------------------------------------------------------------------- /src/components/reorder/reorder.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-reorder', 5 | styleUrl: 'reorder.css' 6 | }) 7 | export class Reorder { 8 | handleReorder = ({ detail }) => { 9 | detail.complete(); 10 | } 11 | 12 | toggleReorder = () => { 13 | const reorderGroup = document.getElementById('reorder') as HTMLIonReorderGroupElement; 14 | reorderGroup.disabled = !reorderGroup.disabled; 15 | } 16 | 17 | render() { 18 | return [ 19 | 20 | 21 | 22 | 23 | 24 | Reorder 25 | 26 | Toggle 27 | 28 | 29 | , 30 | 31 | 32 | 33 | 34 | 35 | Reorder Icon 36 | 37 | 38 | 39 | 40 | 41 | Item 1 42 | 43 | 44 | 45 | 46 | 47 | 48 | Item 2 49 | 50 | 51 | 52 | 53 | 54 | 55 | Item 3 56 | 57 | 58 | 59 | 60 | 61 | 62 | Item 4 63 | 64 | 65 | 66 | 67 | 68 | 69 | Custom Reorder Icon 70 | 71 | 72 | 73 | 74 | Item 5 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | Item 6 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | Item 7 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | Reorder Item 102 | 103 | 104 | 105 | 106 | 107 | Item 8 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | Item 9 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | Item 10 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | ]; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/components/searchbar/searchbar.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/searchbar/searchbar.css -------------------------------------------------------------------------------- /src/components/searchbar/searchbar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, State, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-searchbar', 5 | styleUrl: 'searchbar.css' 6 | }) 7 | export class Searchbar { 8 | @Element() el; 9 | 10 | list: HTMLElement; 11 | 12 | cities = [ 13 | 'Amsterdam', 14 | 'Bogota', 15 | 'Buenos Aires', 16 | 'Cairo', 17 | 'Dhaka', 18 | 'Edinburgh', 19 | 'Geneva', 20 | 'Genoa', 21 | 'Glasglow', 22 | 'Hanoi', 23 | 'Hong Kong', 24 | 'Islamabad', 25 | 'Istanbul', 26 | 'Jakarta', 27 | 'Kiel', 28 | 'Kyoto', 29 | 'Le Havre', 30 | 'Lebanon', 31 | 'Lhasa', 32 | 'Lima', 33 | 'London', 34 | 'Los Angeles', 35 | 'Madrid', 36 | 'Manila', 37 | 'New York', 38 | 'Olympia', 39 | 'Oslo', 40 | 'Panama City', 41 | 'Peking', 42 | 'Philadelphia', 43 | 'San Francisco', 44 | 'Seoul', 45 | 'Taipeh', 46 | 'Tel Aviv', 47 | 'Tokio', 48 | 'Uelzen', 49 | 'Washington', 50 | ] 51 | 52 | @State() items = this.cities; 53 | 54 | handleSearch = (event: any) => { 55 | const query = event.target.value.toLowerCase(); 56 | this.items = this.cities.filter(x => x.toLocaleLowerCase().indexOf(query) >= 0); 57 | } 58 | 59 | render() { 60 | return [ 61 | 62 | 63 | 64 | 65 | 66 | Searchbar 67 | 68 | 69 | 70 | 71 | , 72 | 73 | 74 | 75 | {this.items.map(item => { 76 | return ( 77 | 78 | {item} 79 | 80 | ); 81 | })} 82 | 83 | 84 | ]; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/components/segment/segment.css: -------------------------------------------------------------------------------- 1 | /** 2 | * TODO: This works around https://github.com/ionic-team/ionic-framework/issues/21037 3 | * where segment is offset by back button width. 4 | * Back button width is ~60px, so adjusting by 5 | * half of that gives us ~30px. 6 | */ 7 | .ios component-segment ion-header ion-segment { 8 | left: -30px; 9 | } 10 | 11 | component-segment ion-content ion-segment { 12 | margin: 10px auto; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/segment/segment.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | import { getMode } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-segment', 7 | styleUrl: 'segment.css' 8 | }) 9 | export class Segment { 10 | // In iOS the segment is in the first toolbar, 11 | // in Android it is in the last toolbar 12 | renderToolbars() { 13 | const mode = getMode(); 14 | 15 | if (mode === 'ios') { 16 | return [ 17 | 18 | 19 | 20 | 21 | 22 | All 23 | Favorites 24 | 25 | , 26 | 27 | Segment 28 | 29 | ]; 30 | } 31 | 32 | return [ 33 | 34 | 35 | 36 | 37 | Segment 38 | , 39 | 40 | 41 | All 42 | Favorites 43 | 44 | 45 | ]; 46 | } 47 | 48 | render() { 49 | return [ 50 | 51 | { this.renderToolbars() } 52 | , 53 | 54 | 55 | 56 | 57 | Colors 58 | 59 | 60 | 61 |
62 | 63 | 64 | Call 65 | 66 | 67 | Favorite 68 | 69 | 70 | Map 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | Call 89 | 90 | 91 | 92 | Favorite 93 | 94 | 95 | 96 | Map 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | Call 105 | 106 | 107 | 108 | Favorite 109 | 110 | 111 | 112 | Map 113 | 114 | 115 | 116 | 117 | 118 | 119 | Call 120 | 121 | 122 | 123 | Favorite 124 | 125 | 126 | 127 | Map 128 | 129 | 130 | 131 | 132 | 133 | 134 | Call 135 | 136 | 137 | 138 | Favorite 139 | 140 | 141 | 142 | Map 143 | 144 | 145 |
146 | 147 | 148 | 149 | Scrollable 150 | 151 | 152 | 153 |
154 | 155 | 156 | Call 157 | 158 | 159 | Favorite 160 | 161 | 162 | Map 163 | 164 | 165 | Watch 166 | 167 | 168 | Account 169 | 170 | 171 | Settings 172 | 173 | 174 | Profile 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 |
202 | 203 | ]; 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /src/components/select/select.css: -------------------------------------------------------------------------------- 1 | 2 | /* TODO - this should be fixed in Ionic */ 3 | component-select .list-ios { 4 | margin-top: 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/select/select.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-select', 5 | styleUrl: 'select.css' 6 | }) 7 | export class Select { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Select 16 | 17 | , 18 | 19 | 20 | 21 | 22 | Select Trip 23 | 24 | 25 | 26 | Madison (MSN) 27 | Chicago (ORD) 28 | Austin (AUS) 29 | 30 | 31 | 32 | 33 | New York (JFK) 34 | Honolulu (HNL) 35 | Baltimore (BWI) 36 | 37 | 38 | 39 | 40 | 1 Adult 41 | 2 Adults 42 | 3 Adults 43 | 4 Adults 44 | 45 | 46 | 47 | 48 | First Class 49 | Additional Bag 50 | Headphones 51 | Inflight WiFi 52 | 53 | 54 | 55 | 56 | 57 | 58 | Select Interfaces 59 | 60 | 61 | 62 | Female 63 | Male 64 | 65 | 66 | 67 | 68 | For 15 Minutes 69 | For 1 Hour 70 | For 24 Hours 71 | Until I turn it back on 72 | 73 | 74 | 75 | 76 | 77 | ]; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/skeleton-text/skeleton-text.css: -------------------------------------------------------------------------------- 1 | #data { 2 | display: none; 3 | } 4 | 5 | #skeleton { 6 | display: block; 7 | } -------------------------------------------------------------------------------- /src/components/skeleton-text/skeleton-text.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-skeleton-text', 5 | styleUrl: 'skeleton-text.css' 6 | }) 7 | export class SkeletonText { 8 | @Element() el; 9 | 10 | toggleSkeleton = () => { 11 | const skeletonEl = this.el.querySelector('#skeleton'), 12 | skeletonStyle = window.getComputedStyle(skeletonEl), 13 | skeletonDisplay = skeletonStyle.getPropertyValue('display'); 14 | const dataEl = this.el.querySelector('#data'), 15 | dataStyle = window.getComputedStyle(dataEl), 16 | dataDisplay = dataStyle.getPropertyValue('display'); 17 | 18 | this.el.querySelector('#skeleton').style.display = skeletonDisplay === 'none' ? 'block' : 'none'; 19 | this.el.querySelector('#data').style.display = dataDisplay === 'none' ? 'block' : 'none'; 20 | 21 | } 22 | render() { 23 | return [ 24 | 25 | 26 | 27 | 28 | 29 | Skeleton Text 30 | 31 | Toggle 32 | 33 | 34 | , 35 | 36 | 37 | 38 | 39 | 40 | Albums 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |

Abbey Road

49 |

The Beatles

50 |

1969

51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |

The Dark Side of the Moon

59 |

Pink Floyd

60 |

1973

61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |

For Emma, Forever Ago

69 |

Bon Iver

70 |

2008

71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |

Beast Epic

79 |

Iron & Wine

80 |

2017

81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |

Worlds

89 |

Porter Robinson

90 |

2014

91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |

Worlds

99 |

Awaken, My Love!

100 |

2016

101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |

Coloring Book

109 |

Chance the Rapper

110 |

2016

111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 |

Primal Heart

119 |

Kimbra

120 |

2018

121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |

137 | 138 |

139 |

140 | 141 |

142 |

143 | 144 |

145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 |

153 | 154 |

155 |

156 | 157 |

158 |

159 | 160 |

161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 |

169 | 170 |

171 |

172 | 173 |

174 |

175 | 176 |

177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 |

185 | 186 |

187 |

188 | 189 |

190 |

191 | 192 |

193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |

201 | 202 |

203 |

204 | 205 |

206 |

207 | 208 |

209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 |

217 | 218 |

219 |

220 | 221 |

222 |

223 | 224 |

225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 |

233 | 234 |

235 |

236 | 237 |

238 |

239 | 240 |

241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 |

249 | 250 |

251 |

252 | 253 |

254 |

255 | 256 |

257 | 258 | 259 | 260 | 261 | 262 | ]; 263 | } 264 | } 265 | -------------------------------------------------------------------------------- /src/components/spinner/spinner.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/spinner/spinner.css -------------------------------------------------------------------------------- /src/components/spinner/spinner.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-spinner', 5 | styleUrl: 'spinner.css' 6 | }) 7 | export class Spinner { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Spinner 16 | 17 | , 18 | 19 | 20 | 21 | 22 | 23 | Default Spinner 24 | 25 | 26 | 27 | 28 | 29 | 30 | Lines 31 | 32 | 33 | 34 | 35 | 36 | 37 | Lines Small 38 | 39 | 40 | 41 | 42 | 43 | 44 | Dots 45 | 46 | 47 | 48 | 49 | 50 | 51 | Bubbles 52 | 53 | 54 | 55 | 56 | 57 | 58 | Circles 59 | 60 | 61 | 62 | 63 | 64 | 65 | Crescent 66 | 67 | 68 | 69 | 70 | 71 | 72 | Paused Spinner 73 | 74 | 75 | 76 | 77 | ]; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/tabs/tabs-games.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-tabs-games', 5 | styleUrl: 'tabs.css' 6 | }) 7 | export class TabsGames { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Games 16 | 17 | , 18 | 19 | 20 |

Games

21 | 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/tabs/tabs-movies.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-tabs-movies', 5 | styleUrl: 'tabs.css' 6 | }) 7 | export class TabsMovies { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Movies 16 | 17 | , 18 | 19 | 20 |

Movies

21 | 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/tabs/tabs-music.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-tabs-music', 5 | styleUrl: 'tabs.css' 6 | }) 7 | export class TabsMusic { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Music 16 | 17 | , 18 | 19 | 20 |

Music

21 | 22 | ]; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/tabs/tabs.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/tabs/tabs.css -------------------------------------------------------------------------------- /src/components/tabs/tabs.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-tabs', 5 | styleUrl: 'tabs.css' 6 | }) 7 | export class Tabs { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Music 18 | 19 | 20 | 21 | Movies 22 | 23 | 24 | 25 | Games 26 | 27 | 28 | 29 | 30 | ]; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/text/text.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | margin-top: 0; 3 | } -------------------------------------------------------------------------------- /src/components/text/text.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-text', 5 | styleUrl: 'text.css' 6 | }) 7 | export class Text { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Text 16 | 17 | , 18 | 19 | 20 | 21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

22 | 23 | 24 | 25 |

Nam rutrum justo massa, maximus elementum leo dignissim ac.

26 | 27 | 28 | 29 |

Vestibulum eleifend lorem nec neque interdum varius.

30 | 31 | 32 | 33 |

Sed in neque at nibh congue tincidunt.

34 | 35 | 36 | 37 |
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
38 | 39 | 40 | 41 |
Suspendisse potenti.
42 | 43 | 44 |

45 | Donec magna odio, semper ac nibh et, vestibulum eleifend felis. 46 | Donec pulvinar ex non quam vulputate malesuada in a magna. 47 | Praesent massa arcu, vehicula id pharetra et, cursus at lectus. 48 |

49 | 50 | ]; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/thumbnail/thumbnail.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/thumbnail/thumbnail.css -------------------------------------------------------------------------------- /src/components/thumbnail/thumbnail.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-thumbnail', 5 | styleUrl: 'thumbnail.css' 6 | }) 7 | export class Thumbnail { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Thumbnail 16 | 17 | , 18 | 19 | 20 | 21 | 22 | Default 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | Item Thumbnails 33 | 34 | 35 | 36 | 37 | 38 | 39 | Lorem ipsum 40 | 41 | 42 | 43 | 44 | 45 | 46 |

Lorem ipsum

47 |

dolor sit amet

48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |

Lorem ipsum

56 |

dolor sit amet

57 |

consectetur adipiscing elit. Duis ut urna neque.

58 | 59 | 60 | 61 | 62 | 63 | 64 | Lorem ipsum 65 | 66 | 67 | 68 | 69 | 70 | 71 |

Lorem ipsum

72 |

dolor sit amet

73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |

Lorem ipsum

81 |

dolor sit amet

82 |

consectetur adipiscing elit. Duis ut urna neque.

83 | 84 | 85 | 86 | 87 | ]; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/components/toast/toast.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/toast/toast.css -------------------------------------------------------------------------------- /src/components/toast/toast.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | import { toastController } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-toast', 7 | styleUrl: 'toast.css' 8 | }) 9 | export class Toast { 10 | openToast = async () => { 11 | const toast = await toastController.create({ 12 | color: 'dark', 13 | duration: 2000, 14 | message: 'Paired successfully', 15 | buttons: [{ 16 | text: 'Close', 17 | role: 'cancel' 18 | }] 19 | }); 20 | 21 | toast.present(); 22 | } 23 | render() { 24 | const description = `The Toast is a subtle notification commonly used in modern 25 | applications. It can be used to provide feedback about an operation or to display a 26 | system message. It appears on top of the app's content, and can be dismissed by the 27 | app to resume user interaction with the app.`; 28 | const url = 'toast'; 29 | 30 | return [ 31 | 32 | 33 | 34 | 35 | 36 | Toast 37 | 38 | , 39 | 40 | 41 | 42 | 43 |
44 | Open Toast 45 |
46 | 47 | ]; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/components/toggle/toggle.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/components/toggle/toggle.css -------------------------------------------------------------------------------- /src/components/toggle/toggle.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'component-toggle', 5 | styleUrl: 'toggle.css' 6 | }) 7 | export class Toggle { 8 | render() { 9 | return [ 10 | 11 | 12 | 13 | 14 | 15 | Toggle 16 | 17 | , 18 | 19 | 20 | 21 | 22 | Blueberry 23 | 24 | 25 | 26 | Apple 27 | 28 | 29 | 30 | Grape 31 | 32 | 33 | 34 | Kiwi 35 | 36 | 37 | 38 | Orange 39 | 40 | 41 | 42 | Cherry 43 | 44 | 45 | 46 | Banana 47 | 48 | 49 | 50 | Cantaloupe 51 | 52 | 53 | 54 | Blackberry 55 | 56 | 57 | 58 | ]; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/components/toolbar/toolbar.css: -------------------------------------------------------------------------------- 1 | 2 | .ios component-toolbar ion-header ion-segment { 3 | position: absolute; 4 | 5 | top: 50%; 6 | left: 50%; 7 | 8 | transform: translateX(-50%) translateY(-50%); 9 | } 10 | 11 | .ios component-toolbar ion-footer ion-title { 12 | padding-left: 12px; 13 | text-align: left; 14 | } 15 | 16 | component-toolbar ion-content ion-header ion-toolbar:first-of-type { 17 | padding-top: 0; 18 | } -------------------------------------------------------------------------------- /src/components/toolbar/toolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, State } from '@stencil/core'; 2 | 3 | import { getMode } from '@ionic/core'; 4 | 5 | @Component({ 6 | tag: 'component-toolbar', 7 | styleUrl: 'toolbar.css' 8 | }) 9 | export class Toolbar { 10 | @State() showSearchbar = false; 11 | 12 | toggleText() { 13 | const button = document.getElementById('changeText'); 14 | const hasText = document.getElementById('childText'); 15 | 16 | if (hasText) { 17 | button.removeChild(hasText); 18 | } else { 19 | const text = document.createElement('span'); 20 | text.innerHTML = 'Toggle'; 21 | text.id = 'childText'; 22 | button.appendChild(text); 23 | } 24 | } 25 | 26 | renderMainToolbar() { 27 | const ios = getMode() === 'ios'; 28 | 29 | if (ios) { 30 | return ( 31 | 32 | 33 | 34 | 35 | 36 | All 37 | Favorites 38 | 39 | 40 | ); 41 | } else if (this.showSearchbar) { 42 | return ( 43 | 44 | this.showSearchbar = false}> 45 | 46 | ); 47 | } else { 48 | return ( 49 | 50 | 51 | 52 | 53 | Toolbar 54 | 55 | this.showSearchbar = true}> 56 | 57 | 58 | 59 | 60 | ); 61 | } 62 | } 63 | 64 | render() { 65 | const ios = getMode() === 'ios'; 66 | 67 | return [ 68 | 69 | { this.renderMainToolbar() } 70 | { !ios && 71 | 72 | 73 | All 74 | Favorites 75 | 76 | 77 | } 78 | , 79 | 80 | 81 | 82 | 83 | Toolbar 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | Page title 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | Edit 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | Page title 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | Page title 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | Reset 160 | 161 | 162 | 163 | 164 | Done 165 | 166 | 167 | 168 | Page title 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | Page title 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | Page title 211 | 212 | 213 | 214 | 215 | 216 | Page title 217 | 218 | 219 | 220 | 221 | 222 | , 223 | 224 | 225 | 226 | 227 | Click Button to Toggle Text 228 | 229 | 230 | this.toggleText()}> 231 | 232 | 233 | 234 | 235 | 236 | ]; 237 | } 238 | } 239 | -------------------------------------------------------------------------------- /src/global/app.css: -------------------------------------------------------------------------------- 1 | /* 2 | * App Global CSS 3 | * ---------------------------------------------------------------------------- 4 | * Put style rules here that you want to apply globally. These styles are for 5 | * the entire app and not just one component. Additionally, this file can be 6 | * used as an entry point to import other CSS/Sass files to be included in the 7 | * output CSS. 8 | * For more information on global stylesheets, visit the documentation: 9 | * https://ionicframework.com/docs/layout/global-stylesheets 10 | */ 11 | 12 | /* Core CSS required for Ionic components to work properly */ 13 | @import "~@ionic/core/css/core.css"; 14 | 15 | /* Basic CSS for apps built with Ionic */ 16 | @import "~@ionic/core/css/normalize.css"; 17 | @import "~@ionic/core/css/structure.css"; 18 | @import "~@ionic/core/css/typography.css"; 19 | 20 | /* Optional CSS utils that can be commented out */ 21 | @import "~@ionic/core/css/padding.css"; 22 | @import "~@ionic/core/css/float-elements.css"; 23 | @import "~@ionic/core/css/text-alignment.css"; 24 | @import "~@ionic/core/css/text-transformation.css"; 25 | @import "~@ionic/core/css/flex-utils.css"; 26 | 27 | /** 28 | * Ionic Dark Theme 29 | * ----------------------------------------------------- 30 | * For more info, please see: 31 | * https://ionicframework.com/docs/theming/dark-mode 32 | */ 33 | 34 | @import "~@ionic/core/css/palettes/dark.class.css"; 35 | 36 | /* 37 | * Global CSS 38 | * ---------------------------------------------------------------------------- 39 | * CSS to apply throughout the application. 40 | */ 41 | 42 | @font-face { 43 | font-family: "Roboto"; 44 | src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype"); 45 | } 46 | 47 | @font-face { 48 | font-family: "Roboto"; 49 | src: url("../assets/fonts/Roboto-Medium.ttf") format("truetype"); 50 | font-weight: 450 500; 51 | } 52 | 53 | .component-content { 54 | --background: var(--ion-background-color-step-50, #f2f2f7); 55 | } 56 | 57 | /* 58 | * When placed inside of an element with a background/border color 59 | * the backdrop-filter is blurring it into the header in Safari 60 | * https://bugs.webkit.org/show_bug.cgi?id=168418 61 | */ 62 | 63 | _::-webkit-full-page-media, 64 | _:future ion-header .header-background, 65 | :root .safari_only ion-header .header-background { 66 | backdrop-filter: none !important; 67 | } 68 | 69 | :root.ios { 70 | --ion-padding: 20px; 71 | --ion-margin: 20px; 72 | } 73 | -------------------------------------------------------------------------------- /src/global/app.ts: -------------------------------------------------------------------------------- 1 | import '@ionic/core'; 2 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ionic Kitchen Sink 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/interfaces.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ionic-team/docs-demo/e374a361fa0b17e68863dd29fdea6f06bacf959a/src/interfaces.d.ts -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic Kitchen Sink", 3 | "short_name": "Kitchen Sink", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/icon/icon192.png", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | },{ 11 | "src": "assets/icon/icon512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | }], 15 | "background_color": "#3880ff", 16 | "theme_color": "#3880ff" 17 | } -------------------------------------------------------------------------------- /src/utils/component-utils.ts: -------------------------------------------------------------------------------- 1 | export const getComponents = () => { 2 | return [ 3 | { name: 'Accordion', icon: '/assets/component-icon.svg', id: 'accordion' }, 4 | { name: 'Action Sheet', icon: '/assets/component-icon.svg', id: 'action-sheet' }, 5 | { name: 'Alert', icon: '/assets/component-icon.svg', id: 'alert' }, 6 | { name: 'Avatar', icon: '/assets/component-icon.svg', id: 'avatar' }, 7 | { name: 'Badge', icon: '/assets/component-icon.svg', id: 'badge' }, 8 | { name: 'Breadcrumbs', icon: '/assets/component-icon.svg', id: 'breadcrumbs' }, 9 | { name: 'Button', icon: '/assets/component-icon.svg', id: 'button' }, 10 | { name: 'Card', icon: '/assets/component-icon.svg', id: 'card' }, 11 | { name: 'Checkbox', icon: '/assets/component-icon.svg', id: 'checkbox' }, 12 | { name: 'Chip', icon: '/assets/component-icon.svg', id: 'chip' }, 13 | { name: 'Content', icon: '/assets/component-icon.svg', id: 'content' }, 14 | { name: 'Date & Time Picker', icon: '/assets/component-icon.svg', id: 'datetime' }, 15 | { name: 'Floating Action Button', icon: '/assets/component-icon.svg', id: 'fab' }, 16 | { name: 'Grid', icon: '/assets/component-icon.svg', id: 'grid' }, 17 | { name: 'Icons', icon: '/assets/component-icon.svg', id: 'icons' }, 18 | { name: 'Infinite Scroll', icon: '/assets/component-icon.svg', id: 'infinite-scroll' }, 19 | { name: 'Input', icon: '/assets/component-icon.svg', id: 'input' }, 20 | { name: 'Item', icon: '/assets/component-icon.svg', id: 'item' }, 21 | { name: 'Item Group', icon: '/assets/component-icon.svg', id: 'item-group' }, 22 | { name: 'List', icon: '/assets/component-icon.svg', id: 'list' }, 23 | { name: 'Loading', icon: '/assets/component-icon.svg', id: 'loading' }, 24 | { name: 'Menu', icon: '/assets/component-icon.svg', id: 'menu' }, 25 | { name: 'Modal', icon: '/assets/component-icon.svg', id: 'modal' }, 26 | { name: 'Navigation', icon: '/assets/component-icon.svg', id: 'nav' }, 27 | { name: 'Note', icon: '/assets/component-icon.svg', id: 'note' }, 28 | { name: 'Picker', icon: '/assets/component-icon.svg', id: 'picker' }, 29 | { name: 'Popover', icon: '/assets/component-icon.svg', id: 'popover' }, 30 | { name: 'Progress Bar', icon: '/assets/component-icon.svg', id: 'progress' }, 31 | { name: 'Radio', icon: '/assets/component-icon.svg', id: 'radio' }, 32 | { name: 'Range', icon: '/assets/component-icon.svg', id: 'range' }, 33 | { name: 'Refresher', icon: '/assets/component-icon.svg', id: 'refresher' }, 34 | { name: 'Reorder', icon: '/assets/component-icon.svg', id: 'reorder' }, 35 | { name: 'Searchbar', icon: '/assets/component-icon.svg', id: 'searchbar' }, 36 | { name: 'Segment', icon: '/assets/component-icon.svg', id: 'segment' }, 37 | { name: 'Select', icon: '/assets/component-icon.svg', id: 'select' }, 38 | { name: 'Skeleton Text', icon: '/assets/component-icon.svg', id: 'skeleton-text' }, 39 | { name: 'Spinner', icon: '/assets/component-icon.svg', id: 'spinner' }, 40 | { name: 'Tabs', icon: '/assets/component-icon.svg', id: 'tabs' }, 41 | { name: 'Text', icon: '/assets/component-icon.svg', id: 'text' }, 42 | { name: 'Thumbnail', icon: '/assets/component-icon.svg', id: 'thumbnail' }, 43 | { name: 'Toast', icon: '/assets/component-icon.svg', id: 'toast' }, 44 | { name: 'Toggle', icon: '/assets/component-icon.svg', id: 'toggle' }, 45 | { name: 'Toolbar', icon: '/assets/component-icon.svg', id: 'toolbar' }, 46 | ]; 47 | } 48 | -------------------------------------------------------------------------------- /static.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "www/", 3 | "clean_urls": true, 4 | "https_only": true, 5 | "routes": { 6 | "/assets/*": "/assets/", 7 | "/build/*": "/build/", 8 | "/**": "index.html" 9 | }, 10 | "headers": { 11 | "/**": { 12 | "Cache-Control": "public, max-age=600" 13 | }, 14 | "/build/p-*.js": { 15 | "Cache-Control": "public, max-age=86400" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | 3 | // https://stenciljs.com/docs/config 4 | 5 | export const config: Config = { 6 | globalStyle: 'src/global/app.css', 7 | globalScript: 'src/global/app.ts', 8 | outputTargets: [ 9 | { 10 | type: 'www', 11 | // comment the following line to disable service workers in production 12 | serviceWorker: null, 13 | baseUrl: 'https://myapp.local/' 14 | } 15 | ] 16 | }; 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src" 21 | ], 22 | "exclude": [ 23 | "node_modules" 24 | ] 25 | } 26 | --------------------------------------------------------------------------------