React
Решения для пользовательского интерфейса
Поиск…
Вступление
Предположим, мы вдохновляемся некоторыми идеями из современных пользовательских интерфейсов, используемых в программах, и преобразуем их в компоненты React. Вот что такое тема « Решения для пользовательских интерфейсов ». Атрибуция описана.
Основная панель
import React from 'react';
class Pane extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'section', this.props
);
}
}
панель
import React from 'react';
class Panel extends React.Component {
constructor(props) {
super(props);
}
render(...elements) {
var props = Object.assign({
className: this.props.active ? 'active' : '',
tabIndex: -1
}, this.props);
var css = this.css();
if (css != '') {
elements.unshift(React.createElement(
'style', null,
css
));
}
return React.createElement(
'div', props,
...elements
);
}
static title() {
return '';
}
static css() {
return '';
}
}
Основные отличия от простой панели:
- панель имеет фокус, например, когда она вызывается сценарием или нажата мышью;
- панель имеет статический метод
title
на компонент, поэтому он может быть расширен другим компонентом панели с переопределеннымtitle
(причина в том, что функция может быть снова вызвана при рендеринге для целей локализации, но в рамках этого примераtitle
не имеет смысла) ; - он может содержать индивидуальную таблицу стилей, объявленную в статическом методе
css
(вы можете предварительно загрузить содержимое файла изPANEL.css
).
табуляция
import React from 'react';
class Tab extends React.Component {
constructor(props) {
super(props);
}
render() {
var props = Object.assign({
className: this.props.active ? 'active' : ''
}, this.props);
return React.createElement(
'li', props,
React.createElement(
'span', props,
props.panelClass.title()
)
);
}
}
свойство panelClass
экземпляра Tab
должно содержать класс панели, используемый для описания.
PanelGroup
import React from 'react';
import Tab from './Tab.js';
class PanelGroup extends React.Component {
constructor(props) {
super(props);
this.setState({
panels: props.panels
});
}
render() {
this.tabSet = [];
this.panelSet = [];
for (let panelData of this.state.panels) {
var tabIsActive = this.state.activeTab == panelData.name;
this.tabSet.push(React.createElement(
Tab, {
name: panelData.name,
active: tabIsActive,
panelClass: panelData.class,
onMouseDown: () => this.openTab(panelData.name)
}
));
this.panelSet.push(React.createElement(
panelData.class, {
id: panelData.name,
active: tabIsActive,
ref: tabIsActive ? 'activePanel' : null
}
));
}
return React.createElement(
'div', { className: 'PanelGroup' },
React.createElement(
'nav', null,
React.createElement(
'ul', null,
...this.tabSet
)
),
...this.panelSet
);
}
openTab(name) {
this.setState({ activeTab: name });
this.findDOMNode(this.refs.activePanel).focus();
}
}
panels
свойство PanelGroup
экземпляра должно содержать массив объектов. Каждый объект там объявляет важные данные о панелях:
-
name
- идентификатор панели, используемой скриптом контроллера; -
class
-class
панели.
Не забудьте указать свойство activeTab
для имени нужной вкладки.
осветление
Когда вкладка не указана, необходимая панель получает имя класса active
в элементе DOM (означает, что он будет видимым), и теперь он сфокусирован.
Примерный вид с панелью PanelGroup
import React from 'react';
import Pane from './components/Pane.js';
import Panel from './components/Panel.js';
import PanelGroup from './components/PanelGroup.js';
class MainView extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'main', null,
React.createElement(
Pane, { id: 'common' },
React.createElement(
PanelGroup, {
panels: [
{
name: 'console',
panelClass: ConsolePanel
},
{
name: 'figures',
panelClass: FiguresPanel
}
],
activeTab: 'console'
}
)
),
React.createElement(
Pane, { id: 'side' },
React.createElement(
PanelGroup, {
panels: [
{
name: 'properties',
panelClass: PropertiesPanel
}
],
activeTab: 'properties'
}
)
)
);
}
}
class ConsolePanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Console';
}
}
class FiguresPanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Figures';
}
}
class PropertiesPanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Properties';
}
}
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow