mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
166
core/src/components/segment-button/readme.md
Normal file
166
core/src/components/segment-button/readme.md
Normal file
@ -0,0 +1,166 @@
|
||||
# ion-segment-button
|
||||
|
||||
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
|
||||
|
||||
```html
|
||||
<!-- Segment buttons with text -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
Friends
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
Enemies
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
Paid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
Free
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
Top
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with values and icons -->
|
||||
<ion-segment>
|
||||
<ion-segment-button value="camera">
|
||||
<ion-icon name="camera"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="bookmark">
|
||||
<ion-icon name="bookmark"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment with a value that checks the last button -->
|
||||
<ion-segment value="shared">
|
||||
<ion-segment-button value="bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### activated
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### checked
|
||||
|
||||
boolean
|
||||
|
||||
If true, the segment button is selected. Defaults to `false`.
|
||||
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use for the text color.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
Contains a URL or a URL fragment that the hyperlink points to.
|
||||
If this property is set, an anchor tag will be rendered.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
#### value
|
||||
|
||||
string
|
||||
|
||||
The value of the segment button.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### activated
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### checked
|
||||
|
||||
boolean
|
||||
|
||||
If true, the segment button is selected. Defaults to `false`.
|
||||
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use for the text color.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
Contains a URL or a URL fragment that the hyperlink points to.
|
||||
If this property is set, an anchor tag will be rendered.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
#### value
|
||||
|
||||
string
|
||||
|
||||
The value of the segment button.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionClick
|
||||
|
||||
Emitted when the segment button is clicked.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
151
core/src/components/segment-button/segment-button.ios.scss
Normal file
151
core/src/components/segment-button/segment-button.ios.scss
Normal file
@ -0,0 +1,151 @@
|
||||
@import "./segment-button";
|
||||
@import "./segment-button.ios.vars";
|
||||
|
||||
// iOS Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-segment-button {
|
||||
&:first-of-type .segment-button-ios {
|
||||
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
|
||||
@include margin-horizontal(null, 0);
|
||||
}
|
||||
|
||||
&:not(:first-of-type) .segment-button-ios {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type .segment-button-ios {
|
||||
@include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
|
||||
@include margin-horizontal(0, null);
|
||||
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-button-ios {
|
||||
flex: 1;
|
||||
|
||||
height: $segment-button-ios-height;
|
||||
|
||||
border-width: $segment-button-ios-border-width;
|
||||
border-style: solid;
|
||||
border-color: $segment-button-ios-background-color-activated;
|
||||
|
||||
font-size: $segment-button-ios-font-size;
|
||||
line-height: $segment-button-ios-line-height;
|
||||
|
||||
color: $segment-button-ios-background-color-activated;
|
||||
background-color: $segment-button-ios-background-color;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-ios-icon-size;
|
||||
line-height: $segment-button-ios-icon-line-height;
|
||||
}
|
||||
|
||||
&.segment-activated {
|
||||
color: $segment-button-ios-text-color;
|
||||
background-color: $segment-button-ios-background-color-activated;
|
||||
transition: $segment-button-ios-transition-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: $segment-button-ios-background-color-hover;
|
||||
transition: $segment-button-ios-transition-hover;
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: $segment-button-ios-background-color-active;
|
||||
transition: $segment-button-ios-transition-active;
|
||||
}
|
||||
}
|
||||
|
||||
// iOS Segment Button RTL
|
||||
// --------------------------------------------------
|
||||
|
||||
[dir="rtl"] ion-segment-button {
|
||||
&:first-of-type .segment-button-ios {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type .segment-button-ios {
|
||||
border-left-width: $segment-button-ios-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-ios .segment-button-disabled {
|
||||
color: $segment-button-ios-background-color-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-ios ion-segment-button {
|
||||
max-width: $segment-button-ios-toolbar-button-max-width;
|
||||
}
|
||||
|
||||
.toolbar-ios .segment-button-ios {
|
||||
height: $segment-button-ios-toolbar-button-height;
|
||||
|
||||
font-size: $segment-button-ios-toolbar-font-size;
|
||||
line-height: $segment-button-ios-toolbar-line-height;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-ios-toolbar-icon-size;
|
||||
line-height: $segment-button-ios-toolbar-icon-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-segment-button($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.segment-ios-#{$color-name} {
|
||||
|
||||
.segment-button {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-hover);
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-activated);
|
||||
}
|
||||
|
||||
&.segment-activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-button-disabled {
|
||||
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
@include ios-segment-button($color-name);
|
||||
|
||||
.toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-button-ios-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background of the activated segment button
|
||||
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background of the segment button when hovered
|
||||
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-hover) !default;
|
||||
|
||||
/// @prop - Background of the segment button when active
|
||||
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-activated) !default;
|
||||
|
||||
/// @prop - Background of the activated segment button when active
|
||||
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-disabled) !default;
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
|
||||
|
||||
/// @prop - Transition of the activated segment button
|
||||
$segment-button-ios-transition-activated: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button on hover
|
||||
$segment-button-ios-transition-hover: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button when pressed
|
||||
$segment-button-ios-transition-active: 100ms all linear !default;
|
||||
|
||||
/// @prop - Border width of the segment button
|
||||
$segment-button-ios-border-width: 1px !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-ios-height: 32px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-ios-line-height: 28px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-ios-font-size: 13px !default;
|
||||
|
||||
/// @prop - Border radius of the segment button
|
||||
$segment-button-ios-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-ios-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-ios-icon-line-height: 28px !default;
|
||||
|
||||
/// @prop - Max width of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-max-width: 100px !default;
|
||||
|
||||
/// @prop - Height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-height: 26px !default;
|
||||
|
||||
/// @prop - Line height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-line-height: 22px !default;
|
||||
|
||||
/// @prop - Font size of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-font-size: 12px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-size: 22px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-line-height: 24px !default;
|
||||
|
||||
/// @prop - Opacity of the segment button on hover
|
||||
$segment-button-ios-opacity-hover: .1 !default;
|
||||
|
||||
/// @prop - Opacity of the segment button when pressed
|
||||
$segment-button-ios-opacity-active: .16 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-ios-opacity-disabled: .3 !default;
|
||||
66
core/src/components/segment-button/segment-button.md.scss
Normal file
66
core/src/components/segment-button/segment-button.md.scss
Normal file
@ -0,0 +1,66 @@
|
||||
@import "./segment-button";
|
||||
@import "./segment-button.md.vars";
|
||||
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-button-md {
|
||||
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: $segment-button-md-height;
|
||||
|
||||
border-bottom-width: $segment-button-md-border-bottom-width;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $segment-button-md-border-bottom-color;
|
||||
|
||||
font-size: $segment-button-md-font-size;
|
||||
font-weight: $segment-button-md-font-weight;
|
||||
line-height: $segment-button-md-line-height;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $segment-button-md-text-color;
|
||||
background-color: transparent;
|
||||
opacity: $segment-button-md-opacity;
|
||||
transition: $segment-button-md-transition;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-md-icon-size;
|
||||
line-height: $segment-button-md-icon-line-height;
|
||||
}
|
||||
|
||||
&.activated,
|
||||
&.segment-activated {
|
||||
border-color: $segment-button-md-border-color-activated;
|
||||
opacity: $segment-button-md-opacity-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Button Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-md .segment-button-disabled {
|
||||
opacity: $segment-button-md-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.segment-md-#{$color-name} .segment-button {
|
||||
color: $color-base;
|
||||
|
||||
&.activated,
|
||||
&.segment-activated {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-md-text-color: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Width of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-width: 2px !default;
|
||||
|
||||
/// @prop - Color of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
|
||||
|
||||
/// @prop - Opacity of the segment button
|
||||
$segment-button-md-opacity: .7 !default;
|
||||
|
||||
/// @prop - Border color of the activated segment button
|
||||
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Opacity of the activated segment button
|
||||
$segment-button-md-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-md-opacity-disabled: .3 !default;
|
||||
|
||||
/// @prop - Padding top of the segment button
|
||||
$segment-button-md-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the segment button
|
||||
$segment-button-md-padding-end: 6px !default;
|
||||
|
||||
/// @prop - Padding bottom of the segment button
|
||||
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the segment button
|
||||
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-md-height: 42px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-md-line-height: 40px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-md-font-size: 12px !default;
|
||||
|
||||
/// @prop - Font weight of the segment button
|
||||
$segment-button-md-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Transition of the segment button
|
||||
$segment-button-md-transition: 100ms all linear !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-md-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;
|
||||
37
core/src/components/segment-button/segment-button.scss
Normal file
37
core/src/components/segment-button/segment-button.scss
Normal file
@ -0,0 +1,37 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-segment-button {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@include border-radius(0);
|
||||
@include margin-horizontal(0);
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
font-kerning: none;
|
||||
user-select: none;
|
||||
contain: content;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
105
core/src/components/segment-button/segment-button.tsx
Normal file
105
core/src/components/segment-button/segment-button.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
|
||||
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
|
||||
|
||||
let ids = 0;
|
||||
|
||||
@Component({
|
||||
tag: 'ion-segment-button',
|
||||
styleUrls: {
|
||||
ios: 'segment-button.ios.scss',
|
||||
md: 'segment-button.md.scss'
|
||||
}
|
||||
})
|
||||
export class SegmentButton {
|
||||
styleTmr: any;
|
||||
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
@Prop({ mutable: true }) activated = false;
|
||||
|
||||
/**
|
||||
* The color to use for the text color.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
/**
|
||||
* If true, the segment button is selected. Defaults to `false`.
|
||||
*/
|
||||
@Prop() checked = false;
|
||||
|
||||
/*
|
||||
* If true, the user cannot interact with the segment button. Default false.
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to.
|
||||
* If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
@Prop() href: string;
|
||||
|
||||
/**
|
||||
* The value of the segment button.
|
||||
*/
|
||||
@Prop({ mutable: true }) value: string;
|
||||
|
||||
/**
|
||||
* Emitted when the segment button is clicked.
|
||||
*/
|
||||
@Event() ionClick: EventEmitter;
|
||||
|
||||
componentWillLoad() {
|
||||
if (!this.value) {
|
||||
this.value = `ion-sb-${ids++}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit the click event to the parent segment
|
||||
*/
|
||||
private segmentButtonClick() {
|
||||
clearTimeout(this.styleTmr);
|
||||
|
||||
this.styleTmr = setTimeout(() => {
|
||||
this.ionClick.emit();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
|
||||
const hostClasses = getElementClassMap(this.el.classList);
|
||||
|
||||
const buttonClasses = {
|
||||
'segment-button-disabled': this.disabled,
|
||||
'segment-activated': this.activated,
|
||||
...themedClasses,
|
||||
...hostClasses,
|
||||
};
|
||||
|
||||
const TagType = this.href ? 'a' : 'button';
|
||||
const attrs = (TagType === 'button')
|
||||
? {type: 'button'}
|
||||
: {};
|
||||
|
||||
return [
|
||||
<TagType
|
||||
{...attrs}
|
||||
aria-pressed={this.activated}
|
||||
class={buttonClasses}
|
||||
disabled={this.disabled}
|
||||
href={this.href}
|
||||
onClick={this.segmentButtonClick.bind(this)}>
|
||||
<slot></slot>
|
||||
{ this.mode === 'md' && <ion-ripple-effect/> }
|
||||
</TagType>
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user