mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
138
core/src/components/segment/readme.md
Normal file
138
core/src/components/segment/readme.md
Normal file
@ -0,0 +1,138 @@
|
||||
# ion-segment
|
||||
|
||||
Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.
|
||||
|
||||
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
|
||||
|
||||
```html
|
||||
<!-- Default Segment -->
|
||||
<ion-segment>
|
||||
<ion-segment-button value="friends">
|
||||
Friends
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="enemies">
|
||||
Enemies
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Disabled Segment -->
|
||||
<ion-segment disabled>
|
||||
<ion-segment-button value="sunny" checked>
|
||||
Sunny
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy">
|
||||
Rainy
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment with anchors -->
|
||||
<ion-segment>
|
||||
<ion-segment-button href="#dogs" value="dogs">
|
||||
Dogs
|
||||
</ion-segment-button>
|
||||
<ion-segment-button href="#cats" value="cats">
|
||||
Cats
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment with secondary color -->
|
||||
<ion-segment color="secondary">
|
||||
<ion-segment-button value="standard">
|
||||
Standard
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="hybrid">
|
||||
Hybrid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="sat">
|
||||
Satellite
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment in a toolbar -->
|
||||
<ion-toolbar>
|
||||
<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>
|
||||
</ion-toolbar>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### 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
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
#### value
|
||||
|
||||
string
|
||||
|
||||
the value of the segment.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### 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
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
#### value
|
||||
|
||||
string
|
||||
|
||||
the value of the segment.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionChange
|
||||
|
||||
Emitted when the value property has changed.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
25
core/src/components/segment/segment.ios.scss
Normal file
25
core/src/components/segment/segment.ios.scss
Normal file
@ -0,0 +1,25 @@
|
||||
@import "./segment";
|
||||
@import "./segment.ios.vars";
|
||||
|
||||
// iOS Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-ios {
|
||||
font-family: $segment-ios-font-family;
|
||||
}
|
||||
|
||||
.segment-ios.segment-disabled {
|
||||
opacity: $segment-ios-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-ios .segment-ios {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
10
core/src/components/segment/segment.ios.vars.scss
Normal file
10
core/src/components/segment/segment.ios.vars.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-ios-font-family: $font-family-ios-base !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment
|
||||
$segment-ios-opacity-disabled: .4 !default;
|
||||
15
core/src/components/segment/segment.md.scss
Normal file
15
core/src/components/segment/segment.md.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@import "./segment";
|
||||
@import "./segment.md.vars";
|
||||
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-md {
|
||||
font-family: $segment-md-font-family;
|
||||
}
|
||||
|
||||
.segment-md.segment-disabled {
|
||||
opacity: $segment-md-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
10
core/src/components/segment/segment.md.vars.scss
Normal file
10
core/src/components/segment/segment.md.vars.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-md-font-family: $font-family-md-base !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment
|
||||
$segment-md-opacity-disabled: .3 !default;
|
||||
17
core/src/components/segment/segment.scss
Normal file
17
core/src/components/segment/segment.scss
Normal file
@ -0,0 +1,17 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-segment {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
86
core/src/components/segment/segment.tsx
Normal file
86
core/src/components/segment/segment.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-segment',
|
||||
styleUrls: {
|
||||
ios: 'segment.ios.scss',
|
||||
md: 'segment.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'segment'
|
||||
}
|
||||
})
|
||||
export class Segment {
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
/**
|
||||
* 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 user cannot interact with the segment. Defaults to `false`.
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* the value of the segment.
|
||||
*/
|
||||
@Prop({ mutable: true }) value: string;
|
||||
|
||||
@Watch('value')
|
||||
protected valueChanged(val: string) {
|
||||
this.selectButton(val);
|
||||
this.ionChange.emit();
|
||||
}
|
||||
|
||||
/**
|
||||
* Emitted when the value property has changed.
|
||||
*/
|
||||
@Event() ionChange: EventEmitter;
|
||||
|
||||
|
||||
componentDidLoad() {
|
||||
this.selectButton(this.value);
|
||||
}
|
||||
|
||||
@Listen('ionClick')
|
||||
segmentClick(ev: CustomEvent) {
|
||||
const selectedButton = ev.target as HTMLIonSegmentButtonElement;
|
||||
|
||||
this.value = selectedButton.value;
|
||||
}
|
||||
|
||||
selectButton(val: string) {
|
||||
const buttons = this.el.querySelectorAll('ion-segment-button');
|
||||
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
const button = buttons[i];
|
||||
|
||||
button.activated = (button.value === val);
|
||||
|
||||
// If there is no value set on the segment and a button
|
||||
// is checked we should activate it
|
||||
if (!val && button.checked) {
|
||||
button.activated = button.checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'segment-disabled': this.disabled
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
19
core/src/components/segment/test/basic/e2e.js
Normal file
19
core/src/components/segment/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/segment/test/basic?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('segment/basic', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#finalSegment');
|
||||
});
|
||||
});
|
||||
});
|
||||
196
core/src/components/segment/test/basic/index.html
Normal file
196
core/src/components/segment/test/basic/index.html
Normal file
@ -0,0 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Segment - 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 onload="listenForEvent()">
|
||||
<ion-app>
|
||||
|
||||
<ion-header no-border>
|
||||
<ion-toolbar>
|
||||
<ion-title>Segment - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-toolbar>
|
||||
<ion-segment class="event-tester" value="Free">
|
||||
<ion-segment-button value="Paid">
|
||||
Paid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Free">
|
||||
Free
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Top">
|
||||
Top
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment name="dynamicPropDisable" disabled color="danger">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Reading List">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Shared Links">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment name="dynamicAttrElem" color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
Inactive
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment color="danger">
|
||||
<ion-segment-button value="sunny">
|
||||
Sunny
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="rainy" checked>
|
||||
Rainy
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<div padding>
|
||||
<ion-segment>
|
||||
<ion-segment-button>Seg 1</ion-segment-button>
|
||||
<ion-segment-button>Seg 2</ion-segment-button>
|
||||
<ion-segment-button>Seg 3</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment disabled>
|
||||
<ion-segment-button>Seg 2 1</ion-segment-button>
|
||||
<ion-segment-button checked>Seg 2 2</ion-segment-button>
|
||||
<ion-segment-button>Seg 2 3</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment color="dark" value="Reading List">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
<ion-icon name="book"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Reading List">
|
||||
<ion-icon name="glasses"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Shared Links">
|
||||
<ion-icon name="at"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment name="dynamicPropDisable" disabled color="danger">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Reading List">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Shared Links">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
Inactive
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Dynamic Buttons -->
|
||||
<ion-segment id="dynamicButtons" color="dark"></ion-segment>
|
||||
</div>
|
||||
|
||||
<div padding-horizontal>
|
||||
<ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
|
||||
</div>
|
||||
<div padding>
|
||||
<ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
|
||||
var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
|
||||
|
||||
function toggleDisabled() {
|
||||
for (var i = 0; i < dynamicAttrDisable.length; i++) {
|
||||
const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
|
||||
dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
|
||||
}
|
||||
for (var i = 0; i < dynamicPropDisable.length; i++) {
|
||||
const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
|
||||
dynamicPropDisable[i].disabled = propIsDisabled;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleValue() {
|
||||
var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
|
||||
for (var i = 0; i < dynamicAttrElem.length; i++) {
|
||||
var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
|
||||
|
||||
if (dynamicAttrValue === 'active') {
|
||||
dynamicAttrElem[i].setAttribute('value', 'inactive');
|
||||
} else if (dynamicAttrValue === 'inactive') {
|
||||
dynamicAttrElem[i].setAttribute('value', 'disabled');
|
||||
} else {
|
||||
dynamicAttrElem[i].setAttribute('value', 'active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function listenForEvent() {
|
||||
const ionSegmentElement = document.querySelector('ion-segment.event-tester');
|
||||
await ionSegmentElement.componentOnReady();
|
||||
ionSegmentElement.addEventListener('ionChange', (event) => {
|
||||
console.log('event.target: ', event.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
var dynamicButtons = document.getElementById('dynamicButtons');
|
||||
updateSegmentButtons(2);
|
||||
|
||||
setTimeout(function() {
|
||||
updateSegmentButtons(4);
|
||||
}, 4000);
|
||||
|
||||
function updateSegmentButtons(length) {
|
||||
dynamicButtons.innerHTML = '';
|
||||
|
||||
for (var i = 0; i < length; i++) {
|
||||
dynamicButtons.innerHTML += `
|
||||
<ion-segment-button value="segment-${i}">
|
||||
Btn ${i}
|
||||
</ion-segment-button>`;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
19
core/src/components/segment/test/standalone/e2e.js
Normal file
19
core/src/components/segment/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/segment/test/standalone?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('segment/standalone', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#browserSegment');
|
||||
});
|
||||
});
|
||||
});
|
||||
123
core/src/components/segment/test/standalone/index.html
Normal file
123
core/src/components/segment/test/standalone/index.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Segment - 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>
|
||||
<ion-toolbar>
|
||||
<ion-segment value="Free">
|
||||
<ion-segment-button value="Paid">
|
||||
Paid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Free">
|
||||
Free
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Top">
|
||||
Top
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-segment color="dark" value="Reading List">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
<ion-icon name="book"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Reading List">
|
||||
<ion-icon name="glasses"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Shared Links">
|
||||
<ion-icon name="at"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment id="browserSegment" color="danger">
|
||||
<ion-segment-button href="#bookmarks" value="bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button href="#reading" value="reading">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button href="#links" value="links">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<pre><code><span id="browserResults"></span></code></pre>
|
||||
|
||||
<ion-segment color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
Inactive
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var segment = document.getElementById('browserSegment');
|
||||
var results = document.getElementById('browserResults');
|
||||
|
||||
checkUrl();
|
||||
|
||||
segment.addEventListener('ionChange', function() {
|
||||
checkUrl();
|
||||
});
|
||||
|
||||
function checkUrl() {
|
||||
var url = window.location.href;
|
||||
|
||||
if (url.search('#bookmarks') > -1) {
|
||||
setResults('bookmarks');
|
||||
} else if (url.search('#reading') > -1) {
|
||||
setResults('reading');
|
||||
} else if (url.search('#links') > -1) {
|
||||
setResults('links');
|
||||
}
|
||||
}
|
||||
|
||||
function setResults(value) {
|
||||
results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
|
||||
segment.value = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-segment {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ion-toolbar ion-segment {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid #e6e9ee;
|
||||
background: white;
|
||||
margin: 10px;
|
||||
padding: 4px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
background: #ffffff;
|
||||
word-wrap: normal;
|
||||
white-space: pre;
|
||||
color: #314361;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
Reference in New Issue
Block a user