javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(text): add text component and documentation

Browse Source 
also adds to the breaking changes file
This commit is contained in:
Brandy Carney
2018-01-09 11:52:18 -05:00
parent b622224c55
commit aa6ace9280
10 changed files with 314 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/core/src/components.d.ts vendored
View File

@ -2870,6 +2870,37 @@ declare global {
}
import {
Text as IonText
} from './components/text/text';
declare global {
interface HTMLIonTextElement extends IonText, HTMLElement {
}
var HTMLIonTextElement: {
prototype: HTMLIonTextElement;
new (): HTMLIonTextElement;
};
interface HTMLElementTagNameMap {
"ion-text": HTMLIonTextElement;
}
interface ElementTagNameMap {
"ion-text": HTMLIonTextElement;
}
namespace JSX {
interface IntrinsicElements {
"ion-text": JSXElements.IonTextAttributes;
}
}
namespace JSXElements {
export interface IonTextAttributes extends HTMLAttributes {
color?: string;
mode?: 'ios' | 'md';
}
}
}
import {
Textarea as IonTextarea
} from './components/textarea/textarea';

67
packages/core/src/components/text/readme.md Normal file
View File

@ -0,0 +1,67 @@
# ion-text
The text component is a simple component that can be used to style the text color of any element. The `ion-text` element should wrap the element in order to change the text color of that element.
```html
<ion-text color="secondary">
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
</ion-text>
<ion-text color="primary">
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
</ion-text>
<ion-text color="light">
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
</ion-text>
<ion-text color="danger">
<h4 >H4: The quick brown fox jumps over the lazy dog</h4>
</ion-text>
<ion-text color="dark">
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
</ion-text>
<p>
I saw a werewolf with a Chinese menu in his hand.
Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
<ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
</p>
```
<!-- Auto Generated Below -->
## Properties
#### color
string
#### mode
any
## Attributes
#### color
string
#### mode
any
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

19
packages/core/src/components/text/test/basic/e2e.js Normal file
View 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/text/test/basic?ionicplatform=${platform}`);
}
}
platforms.forEach(platform => {
describe('text/basic', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate();
});
});
});

78
packages/core/src/components/text/test/basic/index.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Text - 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-page>
<ion-header>
<ion-toolbar>
<ion-title>Text - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-text color="secondary">
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
</ion-text>
<ion-text color="primary">
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
</ion-text>
<ion-text color="light">
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
</ion-text>
<ion-text color="danger">
<h4 >H4: The quick brown fox jumps over the lazy dog</h4>
</ion-text>
<ion-text color="dark">
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
</ion-text>
<ion-text id="dynamicColor">
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
</ion-text>
<p>
I saw a werewolf with a Chinese menu in his hand.
Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
<a class="color-purple">My purple class link.</a>
</p>
<p>
He's the hairy-handed gent who ran amuck in Kent.
Lately he's <ion-text color="primary"><sup>been</sup></ion-text> overheard in Mayfair.
Better stay away from him.
He'll rip your lungs out, Jim.
I'd like to meet his tailor.
<ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
</p>
</ion-page>
</ion-app>
<style>
.color-purple {
color: purple;
}
</style>
<script>
var dynamicColor = document.getElementById('dynamicColor');
dynamicColor.color = 'secondary';
</script>
</body>
</html>

16
packages/core/src/components/text/text.ios.scss Normal file
View File

@ -0,0 +1,16 @@
@import "./text.ios.vars";
// iOS Text
// --------------------------------------------------
// Generate iOS Text Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.text-ios-#{$color-name},
.text-ios-#{$color-name} a {
color: $color-base;
}
}

4
packages/core/src/components/text/text.ios.vars.scss Normal file
View File

@ -0,0 +1,4 @@
@import "../../themes/ionic.globals.ios";
// iOS Text
// --------------------------------------------------

16
packages/core/src/components/text/text.md.scss Normal file
View File

@ -0,0 +1,16 @@
@import "./text.md.vars";
// Material Design Text
// --------------------------------------------------
// Generate Material Design Text Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
.text-md-#{$color-name},
.text-md-#{$color-name} a {
color: $color-base;
}
}

4
packages/core/src/components/text/text.md.vars.scss Normal file
View File

@ -0,0 +1,4 @@
@import "../../themes/ionic.globals.md";
// Material Design Text
// --------------------------------------------------

33
packages/core/src/components/text/text.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'ion-text',
styleUrls: {
ios: 'text.ios.scss',
md: 'text.md.scss'
},
host: {
theme: 'text'
}
})
export class Text {
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color: string;
/**
* @input {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';
render() {
return <slot></slot>;
}
}