The official Ionic documentation, built with Docusaurus.
- Contributing Guide π¦
Home Page: https://ionicframework.com/docs
License: Apache License 2.0
The official Ionic documentation, built with Docusaurus.
Hi,
I evaluate the combination vue.js + Ionic v.4.0.0-alpha2 and I'm curious about how to use the Ionic-API.
I have the Slides of the demo and would like to call the method slideNext
from the Vue-Component. Is that possible? If yes - how?
<ion-slides>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
Regards,
Ricko
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
Current behavior:
Expected behavior:
API doc necessary for http://localhost:3333/docs/api/*
pages are not fetched when being fetched from git submodules.
Steps to reproduce:
$ git submodule update --init
Cloning into '/home/kael/Project/dev/ionic-docs/sources/component-preview'...
ERROR: Repository not found.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:ionic-team/component-preview.git' into submodule path '/home/kael/Project/dev/ionic-docs/sources/component-preview' failed
Failed to clone 'sources/component-preview'. Retry scheduled
...
Other information:
https://beta.ionicframework.com/docs/components/#fab
https://beta.ionicframework.com/docs/components/#toast
If you scroll down to "Virtual Scroll" the preview is not triggered (unless text size is increased enough so that the headline is moved up enough to trigger the loading)
I'm submitting a ... (check one with "x")
[ ] bug report
[x ] feature request
URL:
https://beta.ionicframework.com/docs/components
Current behavior:
This list of key Ionic components does not list the radio component, while other inputs are listed.
Expected behavior:
Have a radio button component section.
Steps to reproduce:
N/A
Other information:
N/A
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/theming/color-generator/
Current behavior:
Color pickers are inline with the intro
Expected behavior:
The intro paragraph should not be on the same line as the color pickers
Steps to reproduce:
Go to the URL
Other information:
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/installation/cli/
Current behavior:
I followed the direction at the link abovefor creating an App. and when I inspect package.json I see:
"ionic-angular": "3.9.2"
Expected behavior:
I expect this to create an Ionic v4 app.
Steps to reproduce:
described at link above
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
http://localhost:3333/docs/api/action-sheet
Current behavior:
Unable to fetch api/action-sheet: Not Found
Expected behavior:
It should show the component api documentation.
Steps to reproduce:
$ git clone https://github.com/ionic-team/ionic-docs.git
$ git submodule update --init
$ npm install
$ npm run dev
Other information:
$ npm -v
6.1.0
$ node -v
v8.11.1
Gregor@skynet /c/Development/ionic-docs (master)
$ npm run api-docs
> @ionic/[email protected] preapi-docs C:\Development\ionic-docs
> tsc -p scripts/tsconfig.json
> @ionic/[email protected] api-docs C:\Development\ionic-docs
> node scripts/build/scripts
β Precheck
> Generating
\ API Docs
β Updating...
\ CLI Docs
β Updating...
\ Native Docs
β Updating...
\ Storage Docs
β Updating...
{ Error: Command failed: git clone https://github.com/ionic-team/ionic-native.git sources/ionic-native
fatal: destination path 'sources/ionic-native' already exists and is not an empty directory.
at ChildProcess.exithandler (child_process.js:272:12)
β Precheck
> Generating
/ API Docs
β NPM Installing 4.0.0-alpha.6
/ CLI Docs
β NPM Installing & Building...
Γ Native Docs
β operable program or batch file.
β Storage Docs
{ Error: Command failed: cd sources/ionic-native && ../../node_modules/.bin/typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts
'..' is not recognized as an internal or external command,
operable program or batch file.
at ChildProcess.exithandler (child_process.js:272:12)
at ChildProcess.emit (events.js:127:13)
at maybeClose (internal/child_process.js:933:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
killed: false,
code: 1,
signal: null,
cmd: 'cd sources/ionic-native && ../../node_modules/.bin/typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts',
stdout: '',
stderr: '\'..\' is not recognized as an internal or external command,\r\noperable program or batch file.\r\n', context: {} }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ionic/[email protected] api-docs: `node scripts/build/scripts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ionic/[email protected] api-docs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Gregor\AppData\Roaming\npm-cache\_logs\2018-05-23T20_15_38_156Z-debug.log
OS Window 10, latest
$ node --version && npm --version
v9.6.1
6.0.1
So I cannot compile or use the API docs at all since this issue is appearing all the time.
npx
command when calling typedoc$ npx typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts
ENOENT: no such file or directory, stat 'C:\Development\ionic-docs\src\@ionic-native\plugins\*\index.ts'
Oh right, proper folder!
Gregor@skynet /c/Development/ionic-docs/sources/ionic-native (v5)
$ npx typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts
npx: installed 61 in 11.431s
Using TypeScript 2.7.2 from C:\Users\Gregor\AppData\Roaming\npm-cache\_npx\10692\node_modules\typedoc\node_modules\typescript\lib
JSON written to C:\Development\ionic-docs\sources\ionic-native\dist\docs.json
This shouldn't be such a failure :(
I noticed on the card usage we only have the javascript
tab: https://beta.ionicframework.com/docs/api/card#usage
I understand why, because the angular usage would be the same in this case. Should we make it so that there are no tabs, maybe rename the file to something else for cases like this, or should we make it a point to show an Angular usage even if it's something such as getting the ViewChild/ContentChild or just make it a duplicate of the JavaScript usage to avoid confusion?
It's up for discussion in Slack, but I wanted to make an issue so I remembered to bring it up.
Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[X ] 4.x
I'm submitting a ... (check one with "x")
[ ] bug report
[X ] feature request
Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
Currently there is no documentation on how to create custom page transitions, although it is already very easy to do by extending the existing PageTransition class.
This is a super cool feature and I really think you should add a simpel example (e.g. zoom in/out) to your documentation. I had to search quite a while to figure out how to integrate custom page transitions.
Expected behavior:
Documentation available
Steps to reproduce:
Search documentation for custom page transitions.
I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/components#nav
Current behavior:
References ion-split-pane
Expected behavior:
Should not reference a removed component
Steps to reproduce:
Navigation is how users move between different pages in your app. Ionicβs navigation follows standard navigation concepts and animated transitions. Ionic's nav can also adapt to larger viewports using ion-split-pane
Other information:
If you surf around the new beta docs, you get URLs like https://beta.ionicframework.com/docs/building/contributing (note no trailing slash). But if you open that URL directly (e.g. by clicking that previous link) you are redirected with a 301 to https://beta.ionicframework.com/docs/building/contributing/ (note the trailing slash).
The added redirect makes opening docs pages via referring links (forum, Google, ...) a bit slower.
Solutions:
a) Remove this redirect
b) Change all links to include the trailing slash
When I click the "Responsive Grid" item in the side menu (under Layout), it links me to the center of the page's content, not the top.
Everything in the "Build Errors", "Runtime Errors", "Native Errors", and "Developer Tips" pages is basically outdated, duplicated elsewhere, not useful, and/or inaccurate.
A better place for this stuff would be a knowledge base people could search.
[X] bug report
[ ] feature request
URL:
The css-variables link found on the theming/basics page is broken.
https://beta.ionicframework.com/docs/theming/basics/css-variables <- 404
https://beta.ionicframework.com/docs/theming/basics/
Current behavior:
404
Expected behavior:
Should go to this page:
https://beta.ionicframework.com/docs/theming/css-variables/
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/layout/grid
Current behavior:
Navigate to layout -> structure -> grid and see that it is scrolled halfway down the page to the input box in the example
Expected behavior:
I would expect the page to be at the top of the document upon navigation
A lot of Demo Source link in the Ionic Api Doc (for ex. Ionic Item) are wrong and it link to not found urls.
Example: https://ionicframework.com/docs/api/components/item/Item/
Demo source (under the smartphone emulator) link: https://github.com/ionic-team/ionic/tree/master/demos/src/item (404 not found)
We don't seem to have a page for development vs production, and other environments that the Angular CLI supports:
https://github.com/angular/angular-cli/wiki/stories-application-environments
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/api/action-sheet/
Current behavior:
No menu on mobile (it flashes and disappears)
Expected behavior:
Menu
Steps to reproduce:
Open https://beta.ionicframework.com/docs/api/action-sheet/ on chrome or safari in mobile
Other information:
I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/components
Current behavior:
Shows nothing except:
Cannot read property 'radio' of undefined Please report this to https://github.com/markedjs/marked.
Expected behavior:
Should show the components docs.
Other information:
A list of broken links in the new docs:
Missing images:
and probably many more, but finding them is a pain because of #37
If your viewport is too small to display the preview on the page, it displays a "Open Preview" link. That opens a new window/tab when clicked with URL https://beta.ionicframework.com/docs/content/component-preview-app/docs-www/. That URL only shows an Ionic logo but doesn't do anything.
On a 13" MBP, the site-preview-app component is overflowing its grid cell and causes a horizontal scroll.
I'm submitting a ...
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/components/#popover
Current behavior:
When opening the popover by clicking on the icon in the top-menu, you can select multiple fonts, but the font of the text only changes on the first click.
Expected behavior:
Font selection should be radio boxes and only one should be selectable.
Steps to reproduce:
Tested Environment:
Operating System: Linux Ubuntu 18.04.
Platform: UNIX
Browser: Google Chrome, Version 67.0.3396.99 (Official Build) (64-bit)
Broken links like https://beta.ionicframework.com/docs/this/doesnt/exist return a HTTP status code 200, only the fetch
for https://beta.ionicframework.com/docs/content/this/doesnt/exist.md that is run internally returns a 404. Google and Co won't be able to understand that.
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
https://github.com/ionic-team/ionic-docs/blob/master/src/content/developer-resources/tools.md#editors-and-ides is a 404 url and shows Unable to fetch resources/editors_and_ides: Not Found in the new documentation here.
The older site content -> https://github.com/ionic-team/ionic-site/blob/master/content/docs/developer-resources/editors_and_ides/index.md
Also, there is an editor section in FAQ.
Should the content be moved over or the link removed?
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/components#toast
Current behavior:
Clicking on any of the 5 toast variations brings up error:
Expected behavior:
Toasts work in docs.
I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/faq/changelog
Current behavior:
Error: Unable to fetch faq/changelog:
Expected behavior:
The page should load and display the change log
Steps to reproduce:
Go to https://beta.ionicframework.com/docs/faq/changelog
Other information:
No other information needed.
The Toggle and Radio component demos are missing from the components page
Visual design and spacing update to the iOS/Android component demo platform toggle at the top. This also includes making the toggle visible at all times.
font-family: -apple-system,BlinkMacSystemFont...; font-size: 10px; color: #9da7b9 / #3880ff font-weight: 600 / 700; letter-spacing: 0.04em;
Active border bottom:
border-bottom: 2px solid #b7d4ff
I love the "Open Preview" feature of the docs, but right now looks like second-citizen UI component.
cc @bensperry thoughts?
Can you please update the readme.md in a way so that I can build api-docs without any issues. There's no api-scripts-build
command, So, what's the procedure to really have all docs including API running with npm run start
?
Using windows 10.
$ node --version
v9.6.1
$ npm --version
6.0.1
Currently, this is the issue after doing npm run api-docs
and npm run start
:
Still think the font-size
for our <h1>
and <h2>
headings could be a tad larger to help each section stand out a little more. Let's try:
docs-content h1 { font-size: 36px; ... }
and
docs-content h2 { font-size: 28px; ... }
and
docs-content h3 { font-size: 20px; ... }
Switcher is only visible when scrolled to top, not matter if space would be available or not.
https://beta.ionicframework.com/docs/components/#alert
(Windows 10, FF61)
I'm submitting a ...
[x] bug report
[ ] feature request
URL:
https://beta.ionicframework.com/docs/components/#toast
Current behavior:
If I scroll all the way down on my monitor (1080p resolution) on the component docs page, the last component that gets displayed in the component preview on the right is Toast. Since I cannot scroll further down, the Virtual Scroll-component never gets loaded into the preview:
Expected behavior:
I would expect that I am able to scroll further down to the point where the Virtual Scroll-component gets loaded into preview.
Steps to reproduce:
We need to document the new way to get the Ionic minified CSS / import only the ones you need, see: https://gist.github.com/manucorporat/4a8955134bb90fa7f6ed0bb80b21ef59
I've already begun this in breaking changes, just need to find a spot for it here.
s/A/An
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.