React
Solutions d'interface utilisateur
Recherche…
Introduction
Disons que nous nous inspirons des idées des interfaces utilisateur modernes utilisées dans les programmes et que nous les convertissons en composants React. C'est en cela que consiste le sujet " Solutions d'interface utilisateur ". L'attribution est appréciée.
Volet de base
import React from 'react';
class Pane extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'section', this.props
);
}
}
Panneau
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 '';
}
}
Les principales différences par rapport au volet simple sont les suivantes:
- le panneau a le focus par exemple lorsqu'il est appelé par script ou cliqué par la souris;
- panneau a
title
méthode statique par composant, de sorte qu'il peut être prolongé par d' autres composants du panneau avec redéfinietitle
( la raison ici est que la fonction peut alors être appelé à nouveau sur le rendu à des fins de localisation, mais dans les limites de cet exemple letitle
n'a pas de sens) ; - il peut contenir des feuilles de style individuelles déclarées dans la méthode statique
css
(vous pouvez pré-charger le contenu des fichiers depuisPANEL.css
).
Languette
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
propriété panelClass
de l'occurrence Tab
doit contenir la classe de panneau utilisée pour la description.
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
propriété panels
de l'instance PanelGroup
doit contenir un tableau avec des objets. Chaque objet déclare des données importantes sur les panneaux:
-
name
- identifiant du panneau utilisé par le script du contrôleur; -
class
-class
panel.
N'oubliez pas de définir la propriété activeTab
au nom de l'onglet requis.
Clarification
Lorsque l'onglet est en bas, le panneau requis obtient le nom de la classe active
sur l'élément DOM (cela signifie qu'il sera visible) et il est maintenant concentré.
Exemple de vue avec `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
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow