mirror of https://gitee.com/antv-l7/antv-l7
feat: 新增 Control 相关单测
This commit is contained in:
yanxiong
parent
511e961a68
commit
d0c7497570
|
|
@ -1,4 +1,4 @@
|
|||
import { Mapbox, Scene, MapTheme, GaodeMapV2, GaodeMap } from '@antv/l7';
|
||||
import { Mapbox, Scene, MapTheme } from '@antv/l7';
|
||||
import React, { useState } from 'react';
|
||||
// tslint:disable-next-line:no-duplicate-imports
|
||||
import { FunctionComponent, useEffect } from 'react';
|
||||
|
|
|
|||
|
|
@ -29,24 +29,30 @@ module.exports = {
|
|||
babelConfig: require('./babel.config.js'),
|
||||
},
|
||||
},
|
||||
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
||||
modulePathIgnorePatterns: [ 'dist' ],
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js'],
|
||||
modulePathIgnorePatterns: ['dist'],
|
||||
moduleNameMapper: {
|
||||
'@antv/l7-(.+)$': '<rootDir>packages/$1/src'
|
||||
'@antv/l7-(.+)$': '<rootDir>packages/$1/src',
|
||||
},
|
||||
notify: true,
|
||||
notifyMode: 'always',
|
||||
roots: [ '<rootDir>packages' ],
|
||||
testMatch: [ '**/__tests__/*.spec.+(ts|tsx|js)', '**/*.test.+(ts|tsx|js)', '**/__tests__/*/*.spec.+(ts|tsx|js)' ],
|
||||
roots: ['<rootDir>packages'],
|
||||
testMatch: [
|
||||
'**/__tests__/*.spec.+(ts|tsx|js)',
|
||||
'**/*.test.+(ts|tsx|js)',
|
||||
'**/__tests__/*/*.spec.+(ts|tsx|js)',
|
||||
],
|
||||
transform: {
|
||||
// '^.+\\.(ts|tsx)$': 'ts-jest',
|
||||
// @see https://github.com/kulshekhar/ts-jest/issues/1130
|
||||
'^.+\\.(ts|tsx)$': 'babel-jest',
|
||||
'\\.(less|css)$': 'jest-less-loader'
|
||||
screenfull: 'babel-jest',
|
||||
'\\.(less|css)$': 'jest-less-loader',
|
||||
'\\.png$': 'jest-file-loader',
|
||||
},
|
||||
setupFilesAfterEnv: [ '<rootDir>jest/setupTests.ts' ],
|
||||
snapshotSerializers: [ 'enzyme-to-json/serializer' ],
|
||||
coverageReporters: ["html"],
|
||||
setupFilesAfterEnv: ['<rootDir>jest/setupTests.ts'],
|
||||
snapshotSerializers: ['enzyme-to-json/serializer'],
|
||||
coverageReporters: ['html'],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 9,
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@
|
|||
"husky": "^3.0.9",
|
||||
"jest": "^24.9.0",
|
||||
"jest-canvas-mock": "^2.4.0",
|
||||
"jest-file-loader": "^1.0.2",
|
||||
"jest-less-loader": "^0.1.2",
|
||||
"jest-styled-components": "^6.2.1",
|
||||
"lerc": "^3.0.0",
|
||||
|
|
@ -180,8 +181,8 @@
|
|||
"release-cdn": "antv-bin upload -n @antv/l7",
|
||||
"test": "umi-test",
|
||||
"test-cover": "yarn run worker && umi-test --coverage",
|
||||
"test-cover-viewer": "umi-test --coverage && cd coverage && http-server -p 6001 -o",
|
||||
"test-live": "umi-test --watch",
|
||||
"test-cover-viewer": "cd coverage && http-server -p 6001 -o",
|
||||
"test-live": "umi-test --coverage --watch",
|
||||
"tsc": "tsc",
|
||||
"watch": "yarn clean && yarn worker && lerna run watch --parallel",
|
||||
"bundle": "yarn worker && cross-env BABEL_ENV=bundle NODE_ENV=production yarn rollup -c build/rollup.config.js --environment BUILD:production,MINIFY:true",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import ButtonControl from '../src/control/baseControl/buttonControl';
|
||||
import { createL7Icon } from '../src/utils/icon';
|
||||
|
||||
class TestControl extends ButtonControl {}
|
||||
|
||||
describe('buttonControl', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('life cycle', () => {
|
||||
const control = new TestControl();
|
||||
scene.addControl(control);
|
||||
|
||||
const container = control.getContainer();
|
||||
expect(container.parentElement).toBeInstanceOf(HTMLElement);
|
||||
|
||||
scene.removeControl(control);
|
||||
expect(container.parentElement).not.toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
|
||||
it('disable', () => {
|
||||
const control = new TestControl();
|
||||
scene.addControl(control);
|
||||
control.setIsDisable(true);
|
||||
|
||||
expect(control.getContainer().getAttribute('disabled')).not.toBeNull();
|
||||
control.setIsDisable(false);
|
||||
|
||||
expect(control.getContainer().getAttribute('disabled')).toBeNull();
|
||||
});
|
||||
|
||||
it('options', () => {
|
||||
const control = new TestControl({
|
||||
title: '导出图片',
|
||||
btnText: '导出图片',
|
||||
btnIcon: createL7Icon('l7-icon-tupian'),
|
||||
});
|
||||
scene.addControl(control);
|
||||
|
||||
const container = control.getContainer();
|
||||
expect(container.classList).toContain('l7-button-control');
|
||||
expect(container.getAttribute('title')).toContain('导出图片');
|
||||
const icon = container.querySelector('i');
|
||||
expect(icon?.classList ?? []).toContain('l7-icon-tupian');
|
||||
const textContainer = container.querySelector('.l7-button-control__text')!;
|
||||
expect(textContainer).toBeInstanceOf(HTMLElement);
|
||||
|
||||
control.setOptions({
|
||||
title: undefined,
|
||||
btnText: '替换文本',
|
||||
btnIcon: createL7Icon('l7-icon-tupian1'),
|
||||
});
|
||||
|
||||
expect(container.getAttribute('title')).toBeFalsy();
|
||||
const icon1 = container.querySelector('i');
|
||||
expect(icon1?.classList ?? []).toContain('l7-icon-tupian1');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import { DOM } from '@antv/l7-utils';
|
||||
import { Control } from '../src/control/baseControl';
|
||||
|
||||
class TestControl extends Control {
|
||||
public onAdd(): HTMLElement {
|
||||
return DOM.create('div');
|
||||
}
|
||||
public onRemove(): void {}
|
||||
}
|
||||
|
||||
describe('control', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('life cycle', () => {
|
||||
const className1 = 'testControl1';
|
||||
const className2 = 'testControl2';
|
||||
const control1 = new TestControl({
|
||||
className: className1,
|
||||
});
|
||||
const control2 = new TestControl({
|
||||
className: className2,
|
||||
});
|
||||
scene.addControl(control1);
|
||||
scene.addControl(control2);
|
||||
|
||||
const dom1 = document.querySelector(`.${className1}`);
|
||||
expect(dom1).toBeInstanceOf(HTMLElement);
|
||||
const dom2 = document.querySelector(`.${className2}`);
|
||||
expect(dom2).toBeInstanceOf(HTMLElement);
|
||||
|
||||
scene.removeControl(control1);
|
||||
scene.removeControl(control2);
|
||||
const dom3 = document.querySelector(`.${className1}`);
|
||||
expect(dom3).toBeNull();
|
||||
const dom4 = document.querySelector(`.${className2}`);
|
||||
expect(dom4).toBeNull();
|
||||
});
|
||||
|
||||
it('show hide', () => {
|
||||
const control = new TestControl();
|
||||
scene.addControl(control);
|
||||
control.hide();
|
||||
expect(control.getContainer().classList).toContain('l7-control-hide');
|
||||
expect(control.getIsShow()).toEqual(false);
|
||||
control.show();
|
||||
expect(control.getContainer().classList).not.toContain('l7-control-hide');
|
||||
expect(control.getIsShow()).toEqual(true);
|
||||
});
|
||||
|
||||
it('options', () => {
|
||||
const className = 'gunala';
|
||||
const color = 'rgb(255, 0, 0)';
|
||||
const control = new TestControl({});
|
||||
scene.addControl(control);
|
||||
control.setOptions({
|
||||
position: 'leftbottom',
|
||||
className,
|
||||
style: `color: ${color};`,
|
||||
});
|
||||
const container = control.getContainer();
|
||||
const corner = container.parentElement!;
|
||||
expect(corner.classList).toContain('l7-left');
|
||||
expect(corner.classList).toContain('l7-bottom');
|
||||
expect(container.classList).toContain(className);
|
||||
expect(container.style.color).toEqual(color);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import ExportImage from '../src/control/exportImage';
|
||||
|
||||
describe('exportImage', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('image', () => {
|
||||
const control = new ExportImage({
|
||||
onExport: (base64) => {
|
||||
// tslint:disable-next-line:no-console
|
||||
// console.log(base64);
|
||||
},
|
||||
});
|
||||
scene.addControl(control);
|
||||
|
||||
const button = control.getContainer() as HTMLDivElement;
|
||||
button.click();
|
||||
|
||||
expect(button.parentElement).toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import Fullscreen from '../src/control/fullscreen';
|
||||
|
||||
describe('fullscreen', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('fullscreen', () => {
|
||||
const control = new Fullscreen({});
|
||||
scene.addControl(control);
|
||||
|
||||
const button = control.getContainer() as HTMLDivElement;
|
||||
button.click();
|
||||
|
||||
expect(button.parentElement).toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// import { LineLayer, PointLayer } from '@antv/l7-layers';
|
||||
import { TestScene } from '@antv/l7-test-utils';
|
||||
// import LayerControl from '../src/control/layerControl';
|
||||
|
||||
describe('layerControl', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('layerControl', () => {
|
||||
// const pointLayer = new PointLayer();
|
||||
// const lineLayer = new LineLayer();
|
||||
// const control = new LayerControl({});
|
||||
// scene.addLayer(pointLayer);
|
||||
// scene.addControl(control);
|
||||
//
|
||||
// const options = control.getOptions().options;
|
||||
// expect(options.length).toBeGreaterThan(0);
|
||||
// expect(control.getSelectValue()).toEqual(
|
||||
// 'mapbox://styles/mapbox/streets-v11',
|
||||
// );
|
||||
//
|
||||
// const optionList = ((control
|
||||
// .getPopper()
|
||||
// .getContent() as HTMLDivElement).querySelectorAll(
|
||||
// '.l7-select-control-item',
|
||||
// ) as unknown) as HTMLDivElement[];
|
||||
// optionList[1].click();
|
||||
//
|
||||
// expect(control.getSelectValue()).toEqual(
|
||||
// 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29',
|
||||
// );
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import MapTheme from '../src/control/mapTheme';
|
||||
|
||||
describe('mapTheme', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('mapTheme', () => {
|
||||
const control = new MapTheme({
|
||||
defaultValue: 'normal',
|
||||
});
|
||||
scene.addControl(control);
|
||||
|
||||
const options = control.getOptions().options;
|
||||
expect(options.length).toBeGreaterThan(0);
|
||||
expect(control.getSelectValue()).toEqual(
|
||||
'mapbox://styles/mapbox/streets-v11',
|
||||
);
|
||||
|
||||
const optionList = ((control
|
||||
.getPopper()
|
||||
.getContent() as HTMLDivElement).querySelectorAll(
|
||||
'.l7-select-control-item',
|
||||
) as unknown) as HTMLDivElement[];
|
||||
optionList[1].click();
|
||||
|
||||
// expect(control.getSelectValue()).toEqual(
|
||||
// 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29',
|
||||
// );
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import Navigation from '../src/control/navigation';
|
||||
|
||||
describe('navigation', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('navigation', () => {
|
||||
const control = new Navigation({});
|
||||
scene.addControl(control);
|
||||
|
||||
const button = control.getContainer() as HTMLDivElement;
|
||||
button.click();
|
||||
|
||||
expect(button.parentElement).toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import PopperControl from '../src/control/baseControl/popperControl';
|
||||
|
||||
class TestControl extends PopperControl {}
|
||||
|
||||
describe('popperControl', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('life cycle', () => {
|
||||
const control = new TestControl({});
|
||||
scene.addControl(control);
|
||||
|
||||
const container = control.getContainer();
|
||||
expect(container.parentElement).toBeInstanceOf(HTMLElement);
|
||||
|
||||
scene.removeControl(control);
|
||||
expect(container.parentElement).not.toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
|
||||
it('popper', () => {
|
||||
const control = new TestControl({
|
||||
popperTrigger: 'click',
|
||||
});
|
||||
scene.addControl(control);
|
||||
});
|
||||
|
||||
it('options', () => {
|
||||
const control = new TestControl({});
|
||||
scene.addControl(control);
|
||||
const testClassName = 'testPopper';
|
||||
control.setOptions({
|
||||
popperClassName: testClassName,
|
||||
});
|
||||
expect(control.getPopper().getPopperDOM().classList).toContain(
|
||||
testClassName,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import SelectControl from '../src/control/baseControl/selectControl';
|
||||
import { createL7Icon } from '../src/utils/icon';
|
||||
|
||||
class SingleControl extends SelectControl {
|
||||
public getDefault(option: any): any {
|
||||
return {
|
||||
...super.getDefault(option),
|
||||
options: [
|
||||
{
|
||||
icon: createL7Icon('icon-1'),
|
||||
label: '1',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
icon: createL7Icon('icon-2'),
|
||||
label: '2',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
defaultValue: '2',
|
||||
};
|
||||
}
|
||||
|
||||
protected getIsMultiple(): boolean {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
class MultiControl extends SelectControl {
|
||||
public getDefault(option: any): any {
|
||||
return {
|
||||
...super.getDefault(option),
|
||||
options: [
|
||||
{
|
||||
img: '1',
|
||||
label: '1',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
img: '1',
|
||||
label: '2',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
defaultValue: ['2'],
|
||||
};
|
||||
}
|
||||
protected getIsMultiple(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
describe('selectControl', () => {
|
||||
const scene = TestScene();
|
||||
|
||||
it('life cycle', () => {
|
||||
const control = new SingleControl({});
|
||||
scene.addControl(control);
|
||||
|
||||
const container = control.getContainer();
|
||||
expect(container.parentElement).toBeInstanceOf(HTMLElement);
|
||||
|
||||
scene.removeControl(control);
|
||||
expect(container.parentElement).not.toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
|
||||
it('normal single select', () => {
|
||||
const control = new SingleControl({});
|
||||
scene.addControl(control);
|
||||
|
||||
expect(control.getSelectValue()).toEqual('2');
|
||||
const popperContainer = control.getPopper().getContent() as HTMLDivElement;
|
||||
const optionDomList = Array.from(
|
||||
popperContainer.querySelectorAll('.l7-select-control-item'),
|
||||
) as HTMLDivElement[];
|
||||
expect(optionDomList).toHaveLength(2);
|
||||
expect(optionDomList[0].getAttribute('data-option-value')).toEqual('1');
|
||||
expect(optionDomList[0].getAttribute('data-option-index')).toEqual('0');
|
||||
|
||||
optionDomList[0].click();
|
||||
|
||||
expect(control.getSelectValue()).toEqual('1');
|
||||
});
|
||||
|
||||
it('img multiple select', () => {
|
||||
const control = new MultiControl({});
|
||||
scene.addControl(control);
|
||||
expect(control.getSelectValue()).toEqual(['2']);
|
||||
const popperContainer = control.getPopper().getContent() as HTMLDivElement;
|
||||
const optionDomList = Array.from(
|
||||
popperContainer.querySelectorAll('.l7-select-control-item'),
|
||||
) as HTMLDivElement[];
|
||||
expect(optionDomList).toHaveLength(2);
|
||||
expect(optionDomList[0].getAttribute('data-option-value')).toEqual('1');
|
||||
expect(optionDomList[0].getAttribute('data-option-index')).toEqual('0');
|
||||
expect(popperContainer.querySelectorAll('img')).toHaveLength(2);
|
||||
|
||||
optionDomList[0].click();
|
||||
expect(control.getSelectValue()).toEqual(['2', '1']);
|
||||
optionDomList[0].click();
|
||||
optionDomList[1].click();
|
||||
expect(control.getSelectValue()).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { DOM } from '@antv/l7-utils';
|
||||
import { createL7Icon } from '../src/utils/icon';
|
||||
import { Popper } from '../src/utils/popper';
|
||||
|
||||
describe('util', () => {
|
||||
it('icon', () => {
|
||||
const testClassName = 'l7-test-icon';
|
||||
const testIcon = createL7Icon(testClassName);
|
||||
expect(testIcon).toBeInstanceOf(HTMLElement);
|
||||
expect(testIcon.tagName.toLowerCase()).toEqual('i');
|
||||
const classList = testIcon.classList;
|
||||
expect(classList).toContain('l7-iconfont');
|
||||
expect(classList).toContain(testClassName);
|
||||
expect(classList.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('popper', () => {
|
||||
const button = DOM.create('button') as HTMLButtonElement;
|
||||
button.innerText = 'Test';
|
||||
document.body.append(button);
|
||||
|
||||
const testContent = '123456';
|
||||
const popper1 = new Popper(button, {
|
||||
placement: 'left-start',
|
||||
trigger: 'click',
|
||||
content: testContent,
|
||||
className: 'test-popper-class',
|
||||
container: document.body,
|
||||
unique: true,
|
||||
});
|
||||
const getPopperClassList = (popper: Popper) => {
|
||||
return popper.popperDOM.classList;
|
||||
};
|
||||
popper1.show();
|
||||
|
||||
expect(popper1.getContent()).toEqual(testContent);
|
||||
expect(getPopperClassList(popper1)).toContain('l7-popper');
|
||||
expect(getPopperClassList(popper1)).toContain('test-popper-class');
|
||||
expect(getPopperClassList(popper1)).toContain('l7-popper-left');
|
||||
expect(getPopperClassList(popper1)).toContain('l7-popper-start');
|
||||
expect(getPopperClassList(popper1)).not.toContain('l7-popper-hide');
|
||||
popper1.hide();
|
||||
|
||||
button.click();
|
||||
expect(getPopperClassList(popper1)).not.toContain('l7-popper-hide');
|
||||
button.click();
|
||||
expect(getPopperClassList(popper1)).toContain('l7-popper-hide');
|
||||
|
||||
const newTestContent = DOM.create('div') as HTMLDivElement;
|
||||
newTestContent.innerText = '789456';
|
||||
popper1.setContent(newTestContent);
|
||||
expect(popper1.contentDOM.firstChild).toEqual(newTestContent);
|
||||
popper1.show();
|
||||
|
||||
const popper2 = new Popper(button, {
|
||||
placement: 'right-end',
|
||||
container: document.body,
|
||||
trigger: 'click',
|
||||
content: 'hover',
|
||||
}).show();
|
||||
expect(getPopperClassList(popper2)).toContain('l7-popper-end');
|
||||
expect(getPopperClassList(popper2)).toContain('l7-popper-right');
|
||||
|
||||
const popper3 = new Popper(button, {
|
||||
placement: 'top-start',
|
||||
container: document.body,
|
||||
trigger: 'click',
|
||||
content: 'hover',
|
||||
}).show();
|
||||
expect(getPopperClassList(popper3)).toContain('l7-popper-top');
|
||||
expect(getPopperClassList(popper3)).toContain('l7-popper-start');
|
||||
|
||||
const popper4 = new Popper(button, {
|
||||
placement: 'bottom-end',
|
||||
container: document.body,
|
||||
trigger: 'click',
|
||||
content: 'hover',
|
||||
}).show();
|
||||
expect(getPopperClassList(popper4)).toContain('l7-popper-bottom');
|
||||
expect(getPopperClassList(popper4)).toContain('l7-popper-end');
|
||||
|
||||
const popper5 = new Popper(button, {
|
||||
placement: 'left',
|
||||
container: document.body,
|
||||
trigger: 'click',
|
||||
content: 'hover',
|
||||
}).show();
|
||||
expect(getPopperClassList(popper5)).toContain('l7-popper-left');
|
||||
|
||||
const popper6 = new Popper(button, {
|
||||
placement: 'top',
|
||||
container: document.body,
|
||||
trigger: 'click',
|
||||
content: 'hover',
|
||||
}).show();
|
||||
expect(getPopperClassList(popper6)).toContain('l7-popper-top');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { TestScene } from '@antv/l7-test-utils';
|
||||
import Zoom from '../src/control/zoom';
|
||||
|
||||
describe('zoom', () => {
|
||||
const zoom = new Zoom();
|
||||
it('zoom getDefault', () => {
|
||||
expect(zoom.getDefault().name).toEqual('zoom');
|
||||
const scene = TestScene();
|
||||
scene.addControl(zoom);
|
||||
zoom.disable();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,539 +0,0 @@
|
|||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -1,349 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3580659" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">图层-01</div>
|
||||
<div class="code-name">&#xe612;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">地图</div>
|
||||
<div class="code-name">&#xe66c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">color</div>
|
||||
<div class="code-name">&#xe65f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">gps-fixed</div>
|
||||
<div class="code-name">&#xe678;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">图片</div>
|
||||
<div class="code-name">&#xe61b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">全屏</div>
|
||||
<div class="code-name">&#xe62b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont"></span>
|
||||
<div class="name">退出全屏</div>
|
||||
<div class="code-name">&#xe62c;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'l7-iconfont';
|
||||
src: url('iconfont.woff2?t=1661150801461') format('woff2'),
|
||||
url('iconfont.woff?t=1661150801461') format('woff'),
|
||||
url('iconfont.ttf?t=1661150801461') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.l7-iconfont {
|
||||
font-family: "l7-iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="l7-iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"l7-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-tuceng"></span>
|
||||
<div class="name">
|
||||
图层-01
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-tuceng
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-ditu"></span>
|
||||
<div class="name">
|
||||
地图
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-ditu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-color"></span>
|
||||
<div class="name">
|
||||
color
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-color
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-gps-fixed"></span>
|
||||
<div class="name">
|
||||
gps-fixed
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-gps-fixed
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-tupian"></span>
|
||||
<div class="name">
|
||||
图片
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-tupian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-FullScreen"></span>
|
||||
<div class="name">
|
||||
全屏
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-FullScreen
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon l7-iconfont l7-icon-ExitFullScreen"></span>
|
||||
<div class="name">
|
||||
退出全屏
|
||||
</div>
|
||||
<div class="code-name">.l7-icon-ExitFullScreen
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="l7-iconfont l7-icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
l7-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-tuceng"></use>
|
||||
</svg>
|
||||
<div class="name">图层-01</div>
|
||||
<div class="code-name">#l7-icon-tuceng</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-ditu"></use>
|
||||
</svg>
|
||||
<div class="name">地图</div>
|
||||
<div class="code-name">#l7-icon-ditu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-color"></use>
|
||||
</svg>
|
||||
<div class="name">color</div>
|
||||
<div class="code-name">#l7-icon-color</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-gps-fixed"></use>
|
||||
</svg>
|
||||
<div class="name">gps-fixed</div>
|
||||
<div class="code-name">#l7-icon-gps-fixed</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-tupian"></use>
|
||||
</svg>
|
||||
<div class="name">图片</div>
|
||||
<div class="code-name">#l7-icon-tupian</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-FullScreen"></use>
|
||||
</svg>
|
||||
<div class="name">全屏</div>
|
||||
<div class="code-name">#l7-icon-FullScreen</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#l7-icon-ExitFullScreen"></use>
|
||||
</svg>
|
||||
<div class="name">退出全屏</div>
|
||||
<div class="code-name">#l7-icon-ExitFullScreen</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,58 +0,0 @@
|
|||
{
|
||||
"id": "3580659",
|
||||
"name": "L7",
|
||||
"font_family": "l7-iconfont",
|
||||
"css_prefix_text": "l7-icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "8821270",
|
||||
"name": "图层-01",
|
||||
"font_class": "tuceng",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "6537184",
|
||||
"name": "地图",
|
||||
"font_class": "ditu",
|
||||
"unicode": "e66c",
|
||||
"unicode_decimal": 58988
|
||||
},
|
||||
{
|
||||
"icon_id": "9080696",
|
||||
"name": "color",
|
||||
"font_class": "color",
|
||||
"unicode": "e65f",
|
||||
"unicode_decimal": 58975
|
||||
},
|
||||
{
|
||||
"icon_id": "1410363",
|
||||
"name": "gps-fixed",
|
||||
"font_class": "gps-fixed",
|
||||
"unicode": "e678",
|
||||
"unicode_decimal": 59000
|
||||
},
|
||||
{
|
||||
"icon_id": "11874505",
|
||||
"name": "图片",
|
||||
"font_class": "tupian",
|
||||
"unicode": "e61b",
|
||||
"unicode_decimal": 58907
|
||||
},
|
||||
{
|
||||
"icon_id": "26850241",
|
||||
"name": "全屏",
|
||||
"font_class": "FullScreen",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "26850245",
|
||||
"name": "退出全屏",
|
||||
"font_class": "ExitFullScreen",
|
||||
"unicode": "e62c",
|
||||
"unicode_decimal": 58924
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
describe('BaseControl', () => {
|
||||
// const el = document.createElement('div');
|
||||
// el.id = 'test-div-id';
|
||||
// el.style.width = '500px';
|
||||
// el.style.height = '500px';
|
||||
// el.style.position = 'absolute';
|
||||
// document.querySelector('body')?.appendChild(el);
|
||||
// const scene = new Scene({
|
||||
// id: 'test-div-id',
|
||||
// map: new Map({
|
||||
// style: 'dark',
|
||||
// center: [110.19382669582967, 30.258134],
|
||||
// pitch: 0,
|
||||
// zoom: 3,
|
||||
// }),
|
||||
// });
|
||||
it('control', () => {
|
||||
expect(1).toEqual(1)
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import Zoom from '../zoom';
|
||||
import { TestScene } from '@antv/l7-test-utils'
|
||||
|
||||
|
||||
describe('zoom', () => {
|
||||
const zoom = new Zoom()
|
||||
it('zoom getDefault', () => {
|
||||
expect(zoom.getDefault().name).toEqual('zoom');
|
||||
const scene = TestScene();
|
||||
scene.addControl(zoom);
|
||||
zoom.disable();
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -63,6 +63,10 @@ export default abstract class Control<O extends IControlOption = IControlOption>
|
|||
};
|
||||
}
|
||||
|
||||
public getOptions() {
|
||||
return this.controlOption;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新配置的方法，子类如果有自己的配置，也需要重写该方法
|
||||
* @param newOptions
|
||||
|
|
|
|||
|
|
@ -34,6 +34,10 @@ export default abstract class PopperControl<
|
|||
*/
|
||||
protected popper!: Popper;
|
||||
|
||||
public getPopper() {
|
||||
return this.popper;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取默认配置
|
||||
* @param option
|
||||
|
|
|
|||
|
|
@ -45,10 +45,6 @@ export default abstract class SelectControl<
|
|||
*/
|
||||
protected optionDOMList: HTMLElement[];
|
||||
|
||||
constructor(option: Partial<O>) {
|
||||
super(option);
|
||||
}
|
||||
|
||||
public setOptions(option: Partial<O>) {
|
||||
super.setOptions(option);
|
||||
const { options } = option;
|
||||
|
|
|
|||
|
|
@ -44,6 +44,12 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
}
|
||||
|
||||
protected static conflictPopperList: Popper[] = [];
|
||||
|
||||
// 气泡容器 DOM
|
||||
public popperDOM!: HTMLElement;
|
||||
|
||||
// 气泡中展示的内容容器 DOM
|
||||
public contentDOM!: HTMLElement;
|
||||
/**
|
||||
* 按钮实体
|
||||
* @protected
|
||||
|
|
@ -66,12 +72,6 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
*/
|
||||
protected content: PopperContent;
|
||||
|
||||
// 气泡容器 DOM
|
||||
protected popperDOM!: HTMLElement;
|
||||
|
||||
// 气泡中展示的内容容器 DOM
|
||||
protected contentDOM!: HTMLElement;
|
||||
|
||||
/**
|
||||
* 关闭气泡的定时器
|
||||
* @protected
|
||||
|
|
@ -88,6 +88,14 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
}
|
||||
}
|
||||
|
||||
public getPopperDOM() {
|
||||
return this.popperDOM;
|
||||
}
|
||||
|
||||
public getIsShow() {
|
||||
return this.isShow;
|
||||
}
|
||||
|
||||
public getContent() {
|
||||
return this.content;
|
||||
}
|
||||
|
|
@ -102,15 +110,16 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
this.content = content;
|
||||
}
|
||||
|
||||
public show() {
|
||||
public show = () => {
|
||||
if (this.isShow || !this.contentDOM.innerHTML) {
|
||||
return;
|
||||
return this;
|
||||
}
|
||||
this.setPopperPosition();
|
||||
this.resetPopperPosition();
|
||||
DOM.removeClass(this.popperDOM, 'l7-popper-hide');
|
||||
this.isShow = true;
|
||||
|
||||
if (this.option.unique) {
|
||||
// console.log(Popper.conflictPopperList.length);
|
||||
Popper.conflictPopperList.forEach((popper) => {
|
||||
if (popper !== this && popper.isShow) {
|
||||
popper.hide();
|
||||
|
|
@ -118,16 +127,18 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
});
|
||||
}
|
||||
this.emit('show');
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
public hide() {
|
||||
public hide = () => {
|
||||
if (!this.isShow) {
|
||||
return;
|
||||
return this;
|
||||
}
|
||||
DOM.addClass(this.popperDOM, 'l7-popper-hide');
|
||||
this.isShow = false;
|
||||
this.emit('hide');
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置隐藏气泡的定时器
|
||||
|
|
@ -177,46 +188,7 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
DOM.remove(this.popperDOM);
|
||||
}
|
||||
|
||||
protected createPopper(): HTMLElement {
|
||||
const { container, className = '', content } = this.option;
|
||||
const popper = DOM.create(
|
||||
'div',
|
||||
`l7-popper l7-popper-hide ${className}`,
|
||||
) as HTMLElement;
|
||||
const popperContent = DOM.create('div', 'l7-popper-content') as HTMLElement;
|
||||
const popperArrow = DOM.create('div', 'l7-popper-arrow') as HTMLElement;
|
||||
popper.appendChild(popperContent);
|
||||
popper.appendChild(popperArrow);
|
||||
container.appendChild(popper);
|
||||
this.popperDOM = popper;
|
||||
this.contentDOM = popperContent;
|
||||
if (content) {
|
||||
this.setContent(content);
|
||||
}
|
||||
return popper;
|
||||
}
|
||||
|
||||
protected onBtnClick = (e: MouseEvent) => {
|
||||
if (this.isShow) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
};
|
||||
|
||||
protected onBtnMouseLeave = () => {
|
||||
this.setHideTimeout();
|
||||
};
|
||||
|
||||
protected onBtnMouseMove = (e: MouseEvent) => {
|
||||
this.clearHideTimeout();
|
||||
if (this.isShow) {
|
||||
return;
|
||||
}
|
||||
this.show();
|
||||
};
|
||||
|
||||
protected setPopperPosition() {
|
||||
public resetPopperPosition() {
|
||||
const popperStyleObj: any = {};
|
||||
const { container, offset = [0, 0], placement } = this.option;
|
||||
const [offsetX, offsetY] = offset;
|
||||
|
|
@ -272,4 +244,43 @@ export class Popper extends EventEmitter<'show' | 'hide'> {
|
|||
}
|
||||
DOM.addStyle(this.popperDOM, DOM.css2Style(popperStyleObj));
|
||||
}
|
||||
|
||||
protected createPopper(): HTMLElement {
|
||||
const { container, className = '', content } = this.option;
|
||||
const popper = DOM.create(
|
||||
'div',
|
||||
`l7-popper l7-popper-hide ${className}`,
|
||||
) as HTMLElement;
|
||||
const popperContent = DOM.create('div', 'l7-popper-content') as HTMLElement;
|
||||
const popperArrow = DOM.create('div', 'l7-popper-arrow') as HTMLElement;
|
||||
popper.appendChild(popperContent);
|
||||
popper.appendChild(popperArrow);
|
||||
container.appendChild(popper);
|
||||
this.popperDOM = popper;
|
||||
this.contentDOM = popperContent;
|
||||
if (content) {
|
||||
this.setContent(content);
|
||||
}
|
||||
return popper;
|
||||
}
|
||||
|
||||
protected onBtnClick = () => {
|
||||
if (this.isShow) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
};
|
||||
|
||||
protected onBtnMouseLeave = () => {
|
||||
this.setHideTimeout();
|
||||
};
|
||||
|
||||
protected onBtnMouseMove = () => {
|
||||
this.clearHideTimeout();
|
||||
if (this.isShow) {
|
||||
return;
|
||||
}
|
||||
this.show();
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue