React
Lösungen für die Benutzeroberfläche
Suche…
Einführung
Nehmen wir an, wir lassen uns von einigen Ideen moderner Benutzeroberflächen inspirieren, die in Programmen verwendet werden, und konvertieren sie in React-Komponenten. Daraus besteht das Thema " User Interface Solutions ". Die Namensnennung ist genehmigt.
Grundbereich
import React from 'react';
class Pane extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'section', this.props
);
}
}
Panel
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 '';
}
}
Hauptunterschiede gegenüber dem einfachen Bereich sind:
- Das Panel hat den Fokus in der Instanz, wenn es per Skript aufgerufen oder mit der Maus angeklickt wird.
- Die statische Methode für jede Komponente des
title
verfügt über eine statische Methode. Daher kann sie um eine andere Panel-Komponente mit überschriebenemtitle
(Grund dafür ist, dass die Funktion beim Rendern zu Lokalisierungszwecken erneut aufgerufen werden kann. In diesem Beispiel macht dertitle
jedoch keinen Sinn.) ; - Es kann einzelne Stylesheets enthalten, die in der statischen
css
Methode deklariert wurden (Sie können den Dateiinhalt ausPANEL.css
).
Tab
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
Eigenschaft panelClass
der Tab
Instanz muss die zur Beschreibung verwendete Panel- Klasse enthalten.
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
Eigenschaft der PanelGroup
Instanz muss ein Array mit Objekten enthalten. Jedes Objekt dort erklärt wichtige Daten zu Panels:
-
name
- Kennung des Panels, das vom Controller-Skript verwendet wird; -
class
- Klasse der Klasse.
Vergessen Sie nicht, die Eigenschaft activeTab
auf den Namen der benötigten Registerkarte activeTab
.
Klärung
Wenn die Registerkarte deaktiviert ist, erhält der benötigte Bereich den Klassennamen active
DOM-Element (bedeutet, dass es sichtbar sein wird), und der Fokus ist jetzt aktiv.
Beispielansicht mit `PanelGroup`s
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
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow