mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
29
core/src/components/badge/badge.ios.scss
Normal file
29
core/src/components/badge/badge.ios.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@import "./badge";
|
||||
@import "./badge.ios.vars";
|
||||
|
||||
// iOS Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
.badge-ios {
|
||||
@include border-radius($badge-ios-border-radius);
|
||||
|
||||
font-family: $badge-ios-font-family;
|
||||
|
||||
color: $badge-ios-text-color;
|
||||
background-color: $badge-ios-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Badge Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$base-color: ion-color($colors-ios, $color-name, base, ios);
|
||||
$contrast-color: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.badge-ios-#{$color-name} {
|
||||
color: $contrast-color;
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
}
|
||||
16
core/src/components/badge/badge.ios.vars.scss
Normal file
16
core/src/components/badge/badge.ios.vars.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-ios-border-radius: 10px !default;
|
||||
|
||||
/// @prop - Font family of the badge
|
||||
$badge-ios-font-family: $font-family-ios-base !default;
|
||||
|
||||
/// @prop - Background color of the badge
|
||||
$badge-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Text color of the badge
|
||||
$badge-ios-text-color: ion-color($colors-ios, $badge-ios-background-color, contrast, ios) !default;
|
||||
29
core/src/components/badge/badge.md.scss
Normal file
29
core/src/components/badge/badge.md.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@import "./badge";
|
||||
@import "./badge.md.vars";
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
.badge-md {
|
||||
@include border-radius($badge-md-border-radius);
|
||||
|
||||
font-family: $badge-md-font-family;
|
||||
|
||||
color: $badge-md-text-color;
|
||||
background-color: $badge-md-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Badge Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$base-color: ion-color($colors-md, $color-name, base, md);
|
||||
$contrast-color: ion-color($colors-md, $color-name, contrast, md);
|
||||
|
||||
.badge-md-#{$color-name} {
|
||||
color: $contrast-color;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
16
core/src/components/badge/badge.md.vars.scss
Normal file
16
core/src/components/badge/badge.md.vars.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Font family of the badge
|
||||
$badge-md-font-family: $font-family-md-base !default;
|
||||
|
||||
/// @prop - Background color of the badge
|
||||
$badge-md-background-color: ion-color($colors-md, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Text color of the badge
|
||||
$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, ios) !default;
|
||||
30
core/src/components/badge/badge.scss
Normal file
30
core/src/components/badge/badge.scss
Normal file
@ -0,0 +1,30 @@
|
||||
@import "./badge.vars";
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-badge {
|
||||
@include padding($badge-ios-padding-top, $badge-ios-padding-end, $badge-ios-padding-bottom, $badge-ios-padding-start);
|
||||
@include text-align(center);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
min-width: $badge-min-width;
|
||||
|
||||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
|
||||
line-height: 1;
|
||||
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
ion-badge:empty {
|
||||
display: none;
|
||||
}
|
||||
30
core/src/components/badge/badge.tsx
Normal file
30
core/src/components/badge/badge.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-badge',
|
||||
styleUrls: {
|
||||
ios: 'badge.ios.scss',
|
||||
md: 'badge.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'badge'
|
||||
}
|
||||
})
|
||||
export class Badge {
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
}
|
||||
25
core/src/components/badge/badge.vars.scss
Normal file
25
core/src/components/badge/badge.vars.scss
Normal file
@ -0,0 +1,25 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the badge
|
||||
$badge-ios-padding-top: 3px !default;
|
||||
|
||||
/// @prop - Padding end of the badge
|
||||
$badge-ios-padding-end: 8px !default;
|
||||
|
||||
/// @prop - Padding bottom of the badge
|
||||
$badge-ios-padding-bottom: $badge-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the badge
|
||||
$badge-ios-padding-start: $badge-ios-padding-end !default;
|
||||
|
||||
/// @prop - Minimum width of the badge
|
||||
$badge-min-width: 10px !default;
|
||||
|
||||
/// @prop - Font size of the badge
|
||||
$badge-font-size: 13px !default;
|
||||
|
||||
/// @prop - Font weight of the badge
|
||||
$badge-font-weight: bold !default;
|
||||
71
core/src/components/badge/readme.md
Normal file
71
core/src/components/badge/readme.md
Normal file
@ -0,0 +1,71 @@
|
||||
# ion-badge
|
||||
|
||||
Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
|
||||
|
||||
```html
|
||||
<ion-badge>99</ion-badge>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-badge color="primary">11</ion-badge>
|
||||
<ion-badge color="secondary">22</ion-badge>
|
||||
<ion-badge color="warning">33</ion-badge>
|
||||
<ion-badge color="danger">44</ion-badge>
|
||||
<ion-badge color="light">55</ion-badge>
|
||||
<ion-badge color="dark">66</ion-badge>
|
||||
|
||||
<!-- Item with badge on left and right -->
|
||||
<ion-item>
|
||||
<ion-badge slot="start">11</ion-badge>
|
||||
<ion-label>My Item</ion-label>
|
||||
<ion-badge slot="end">22</ion-badge>
|
||||
</ion-item>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
19
core/src/components/badge/test/basic/e2e.js
Normal file
19
core/src/components/badge/test/basic/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/badge/test/basic?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('badge/basic', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
127
core/src/components/badge/test/basic/index.html
Normal file
127
core/src/components/badge/test/basic/index.html
Normal file
@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Badge - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Badge - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-list>
|
||||
<ion-list-header>Badges Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Badge</ion-label>
|
||||
<ion-badge slot="end">00</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary Badge</ion-label>
|
||||
<ion-badge slot="end" color="primary">11</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary Badge</ion-label>
|
||||
<ion-badge slot="end" color="secondary">22</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Badge</ion-label>
|
||||
<ion-badge slot="end" color="tertiary">33</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Badge</ion-label>
|
||||
<ion-badge slot="end" color="success">44</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Badge</ion-label>
|
||||
<ion-badge slot="end" color="warning">55</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger Badge</ion-label>
|
||||
<ion-badge slot="end" color="danger">66</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light Badge</ion-label>
|
||||
<ion-badge slot="end" color="light">77</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Badge</ion-label>
|
||||
<ion-badge slot="end" color="medium">88</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark Badge</ion-label>
|
||||
<ion-badge slot="end" color="dark">99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
|
||||
<ion-label>Dynamic Badge Color (toggle)</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>Badges Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Default Badge</ion-label>
|
||||
<ion-badge slot="start">00</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary Badge</ion-label>
|
||||
<ion-badge slot="start" color="primary">11</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary Badge</ion-label>
|
||||
<ion-badge slot="start" color="secondary">22</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Badge</ion-label>
|
||||
<ion-badge slot="start" color="tertiary">33</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Badge</ion-label>
|
||||
<ion-badge slot="start" color="success">44</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Badge</ion-label>
|
||||
<ion-badge slot="start" color="warning">55</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger Badge</ion-label>
|
||||
<ion-badge slot="start" color="danger">66</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light Badge</ion-label>
|
||||
<ion-badge slot="start" color="light">77</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Badge</ion-label>
|
||||
<ion-badge slot="start" color="medium">88</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark Badge</ion-label>
|
||||
<ion-badge slot="start" color="dark">99</ion-badge>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
const badge = document.querySelector('#toggleColor');
|
||||
|
||||
function toggleColor() {
|
||||
const prev = badge.getAttribute('color');
|
||||
badge.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
|
||||
badge.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
19
core/src/components/badge/test/standalone/e2e.js
Normal file
19
core/src/components/badge/test/standalone/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/badge/test/standalone?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('badge/standalone', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
26
core/src/components/badge/test/standalone/index.html
Normal file
26
core/src/components/badge/test/standalone/index.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Badge - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Default -->
|
||||
<ion-badge>99</ion-badge>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-badge color="primary">11</ion-badge>
|
||||
<ion-badge color="secondary">22</ion-badge>
|
||||
<ion-badge color="tertiary">33</ion-badge>
|
||||
<ion-badge color="success">44</ion-badge>
|
||||
<ion-badge color="warning">55</ion-badge>
|
||||
<ion-badge color="danger">66</ion-badge>
|
||||
<ion-badge color="light">77</ion-badge>
|
||||
<ion-badge color="medium">88</ion-badge>
|
||||
<ion-badge color="dark">99</ion-badge>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user