javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/core
History
Brandy Carney b2021fd9c4 fix(theming): update global css variable naming and default values (#16003) 
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used.

- removes some of the non mode-specific global Sass variables
- updates the md and ios values so that the default is the css variable
with different fallbacks
- removes non-color related css variables from the global file
- fixes item so it uses the background color that is set by the global
file

# Breaking Changes

## Removed Global CSS Variables

The following global CSS variables have been removed for the reasons listed.

| Variable Name                     | Reason                                          |
| ----------------------------------| ------------------------------------------------|
| `--ion-toolbar-color-inactive`    | Unused                                          |
| `--ion-ripple-background-color`   | Unused / Ripple color is based on component     |
| `--ion-header-size`               | Removed in favor of using CSS for h1-h6         |
| `--ion-header-step`               | Removed in favor of using CSS for h1-h6         |

## Renamed Global CSS Variables

The following global CSS variables have been renamed for the reasons listed.

| Old Variable Name                        | New Variable Name                  | Reason                                                                        |
| -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------|
| `--ion-toolbar-text-color`               | `--ion-toolbar-color`              | Variable is not limited to text color                                         |
| `--ion-toolbar-color-active`             | `--ion-toolbar-color-activated`    | Consistency with our component variables                                      |
| `--ion-tabbar-text-color`                | `--ion-tab-bar-color`              | Variable is not limited to text color                                         |
| `--ion-tabbar-text-color-active`         | `--ion-tab-bar-color-activated`    | Consistency with our component variables                                      |
| `--ion-tabbar-background-color`          | `--ion-tab-bar-background`         | Applies to the background property                                            |
| `--ion-tabbar-background-color-focused`  | `--ion-tab-bar-background-focused` | Applies to the background property                                            |
| `--ion-item-background-color`            | `--ion-item-background`            | Applies to the background property                                            |
| `--ion-item-background-color-active`     | `--ion-item-background-activated`  | Applies to the background property / Consistency with our component variables |
| `--ion-item-text-color`                  | `--ion-item-color`                 | Variable is not limited to text color                                         |
| `--ion-placeholder-text-color`           | `--ion-placeholder-color`          | Consistency with other variables                                              |

Fixes #15989 
Fixes #15559
2018-10-23 12:37:04 -04:00
..
screenshot
chore(screenshot): local & CI integration (#15825)
2018-10-08 10:28:39 -05:00
scripts
fix(theming): update global css variable naming and default values (#16003)
2018-10-23 12:37:04 -04:00
src
fix(theming): update global css variable naming and default values (#16003)
2018-10-23 12:37:04 -04:00
.npmrc
chore(package): disable package-lock
2018-07-11 13:41:17 -05:00
.stylelintrc.yml
fix(css): add core.css (#15220)
2018-08-29 18:05:20 +02:00
CONTRIBUTING.md
docs(): add local CONTRIBUTING
2018-09-07 01:44:29 +02:00
LICENSE
chore(packages): move the packages to root
2018-03-12 16:02:25 -04:00
package.json
chore(package): update to stencil 0.14.2 (#16046)
2018-10-23 09:10:49 -05:00
README.md
4.0.0-beta.13
2018-10-14 11:49:02 -05:00
stencil.config.ts
fix(angular): generate proxies for ion-tabbar (#15954)
2018-10-15 13:34:07 -05:00
tsconfig.json
chore(): update to latest stencil
2018-07-31 20:09:26 +02:00
tslint.json
chore(tslint): disable 'no-floating-promises'
2018-09-14 00:50:44 +02:00

README.md

@ionic/core

Ionic is an open source App Development Framework that makes it easy to build top quality Native and Progressive Web Apps with web technologies.

The Ionic Core package contains the Web Components that make up the reusable UI building blocks of Ionic Framework. These components are designed to be used in traditional frontend view libraries/frameworks (such as Stencil, React, Angular, or Vue), or on their own through traditional JavaScript in the browser.

Features

  • Tiny, highly optimized components built with Stencil
  • Styling for both iOS and Material Design
  • No build or compiling required
  • Simply add the static files to any project
  • Lazy-loaded components without configuration
  • Asynchronous rendering
  • Theming through CSS Variables

How to use

Vanilla HTML

Easiest way to start using Ionic Core is by adding a script tag to the CDN:

<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>

Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as document.createElement('ion-toggle').

Additionally, within this package is a dist/ionic.js file and accompanying dist/ionic/ directory. These are the same files which are used by the CDN, and they're available in this package so they can be apart of an app's local development.

Framework Bindings

The @ionic/core package can by used in simple HTML, or by vanilla JavaScript without any framework at all. Ionic also has packages that make it easier to integrate Ionic into a framework's traditional ecosystem and patterns. (However, at the lowest-level framework bindings are still just using Ionic Core and Web Components).

How to contribute

Check out the CONTRIBUTE guide

Related

License