ToolsSidePanel

ToolsSidePanel en Storybook

Uso

Descripción general

El panel lateral de herramientas es un panel que se puede contraer ubicado en el lado derecho de la pantalla. Proporciona a los usuarios herramientas, parámetros de configuración o información contextual adicionales sin interrumpir su flujo de trabajo principal. Este panel está diseñado para mejorar la productividad, ya que ofrece un acceso rápido a acciones y recursos clave.

Cuándo se debe utilizar

• Los usuarios necesitan un acceso rápido a los controles sin salir del área de contenido principal.
• El panel contiene configuraciones ajustables que afectan la vista actual.
• El panel sirve como asistente contextual y ofrece opciones relevantes en función de la selección del usuario.

Cuándo no se debe utilizar

• Las acciones que contiene son primarias y deben formar parte de la interfaz de usuario principal.
• El panel contiene demasiadas opciones complejas, lo que lo hace abrumador para los usuarios.
• Los usuarios deben completar acciones de varios pasos que requieren toda su atención (analice la posibilidad de usar un modal en su lugar).
• El panel entra en conflicto con otros elementos de la interfaz de usuario, lo que dificulta el uso.

Anatomía

1. Contenedor de panel: Estructura principal que contiene todos los componentes del panel lateral.
2. Elementos de herramienta: El panel consta de íconos sin rótulos de texto.
3. Botón de ícono que se puede contraer: Botón de flecha que permite a los usuarios expandir o contraer el panel.

No todos los elementos son obligatorios. Incluya solo lo necesario para su caso de uso específico. El panel lateral de herramientas es un panel abierto y flexible que puede incluir varios elementos en función de casos de uso específicos. Los equipos pueden personalizarlo agregando diferentes componentes, herramientas y funcionalidades según sea necesario, al tiempo que mantienen una experiencia optimizada.

Comportamiento

• Aparece en el lado derecho de la pantalla y se extiende desde el encabezado hasta la parte inferior de la página.
• Puede contraerse o persistir, según las necesidades de la aplicación.
• Empuja el contenido en lugar de superponerse a él, lo que garantiza una disposición clara y estructurada.
• Proporciona acceso rápido a las herramientas o las acciones contextuales sin interrumpir el flujo de trabajo principal.

Elementos relacionados

• Encabezado
• Subtítulo
• Panel lateral
• Pie de página

Código

const [collapsed, setCollapsed] = useState<boolean>(false);

<ToolsSidePanel
  onCollapsedChange={setCollapsed}
  collapsed={collapsed}
  className={styles.layoutSamples}>
  <ToolsSidePanelContent>
    <p>Sample side panel text</p>
  </ToolsSidePanelContent>
  <ToolsSidePanelBar>
    <HomeIcon /> {/* Home icon imported from '@jutro/icons' */}
  </ToolsSidePanelBar>
</ToolsSidePanel>

Instrucción de importación

import {
  ToolsSidePanel,
  ToolsSidePanelContent,
  ToolsSidePanelBar,
} from '@jutro/components';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

Propiedades ToolsSidePanel

childrenobligatorio

Tipo

node[]

Descripción

Content of the ToolsSidePanel. These must be ToolsSidePanelContent and/or ToolsSidePanelBar components.

className

Tipo

string

Descripción

CSS class name for this component.

collapsed

Tipo

boolean

Descripción

If set to true, the ToolsSidePanelContent child component is collapsed.

hideCollapseButton

Tipo

boolean

Descripción

If set to true, the collapse button is not rendered.

onCollapsedChange

Tipo

(collapsed: boolean) => void

Descripción

A callback invoked when the collapse button is clicked.

Propiedades ToolsSidePanelContent

childrenobligatorio

Tipo

node

Descripción

Content of the ToolsSidePanelContent component.

Propiedades ToolsSidePanelBar

childrenobligatorio

Tipo

node

Descripción

Content of the ToolsSidePanelBar.

Ganchos

No hay ganchos para ToolsSidePanel.

Claves de traducción

Hay dos claves de traducción asociadas al componente ToolsSidePanel:

Clave	Se usa para
jutro-components.layout.ToolsSidePanel.collapseButton	Valor aria-label cuando hacer clic en el botón contraería el ToolsSidePanel
jutro-components.layout.ToolsSidePanel.expandButton	Valor aria-label cuando hacer clic en el botón expandiría el ToolsSidePanel

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un ToolsSidePanel correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de panel lateral de herramientas básico

El componente ToolsSidePanel es un encapsulador que designará qué componentes forman un par de paneles en el lado derecho de la ventana. El ToolsSidePanel puede contener hasta dos componentes secundarios: ToolsSidePanelContent y ToolsSidePanelBar. El componente ToolsSidePanelContent renderiza un panel más ancho que se puede contraer con un botón.

En este ejemplo, el gancho de React useState se utiliza para administrar el estado contraído del ToolsSidePanelContent.

const [collapsed, setCollapsed] = useState<boolean>(false);

<ToolsSidePanel
  onCollapsedChange={setCollapsed}
  collapsed={collapsed}
  className={styles.layoutSamples}>
  <ToolsSidePanelContent>
    <p>Sample side panel text</p>
  </ToolsSidePanelContent>
  <ToolsSidePanelBar>
    <HomeIcon /> {/* Home icon imported from '@jutro/icons' */}
  </ToolsSidePanelBar>
</ToolsSidePanel>

Registro de cambios

10.10.0

Se agregó el componente ToolsSidePanel.