Control Tabs - Nefele 4 Harbour

Acceder Darse de alta He olvidado la contraseña

Este debate tiene 5 respuestas, 3 mensajes y ha sido actualizado por última vez el 2 años, 11 meses por Gabriel Ornelas. This post has been viewed 522 times

Mostrando 5 respuestas a los debates

Autor

Entradas

12-05-2021 a las 23:04 #1797

Gabriel Ornelas
Participante

Hola Equipo Nefele

Esta nefelizado este control

https://materializecss.com/tabs.html

Saludos!

13-05-2021 a las 11:01 #1799

Alfredo Sanz

Superadministrador

Sí. Me ha costado un poquito encontrarlo, porque hace mucho que se lo preparamos, pero lo tenemos.

Te dejo un pequeño ejemplo

 // Comenzamos instanciando la Página Web que queremos crear
   WITH OBJECT TWebPage():New()
      :lValign          := .f.
      :lContainer       := .f.
      :lAlerts          := .f.

      WITH OBJECT WPanel():New(:WO)
         :cTitle                := "Clientes"
         :aWidth[ _grande ]     := 10
         :aOffset[ _grande ]    := 1
         :oStyle:cPadding       := 0
         :oStyle:cBorder_radius := "10px"

         WITH OBJECT WForm():New( :WO )
            :cId       := "forma_clientes"
            :cFunction := "#alert('Saliendo')"

            WITH OBJECT wTabs():New( :WO )
               :cId           := "tabs_captura"
               :AddItem("primero"  , "bevel_uno")  //Nombre del tab y bevel a contener
               :AddItem("segundo"  , "bevel_dos")  
               :AddItem("tercero"  , "bevel_tres")  

               :Create()

            END WITH
         
         
            // Bevel contenedor de la primera pestaña
            WITH OBJECT WBevel():New(:WO)
               :cId       := "bevel_uno"
               :nStyle    := xc_Row

               WITH OBJECT WEdit():New( :WO )
                  :cId                := "cliente"
                  :cHint              := "."
                  :cTitle             := "cliente"
                  :nLength            := 4
                  :Create()
               END WITH

               WITH OBJECT WEdit():New( :WO )
                  :cId                := "nombre"
                  :cHint              := "."
                  :cTitle             := "Nombre"
                  :nLength            := 50
                  :Create()
               END WITH

               :Create()
            END WITH

            // Bevel contenedor de la segunda pestaña
            WITH OBJECT WBevel():New(:WO)
               :cId       := "bevel_dos"
               :nStyle    := xc_Row

               WITH OBJECT WEdit():New( :WO )
                  :cId                := "direccion"
                  :cHint              := "."
                  :cTitle             := "Direccion"
                  :nLength            := 40
                  :Create()
               END WITH

               WITH OBJECT WEdit():New( :WO )
                  :cId                := "ciudad"
                  :cHint              := "."
                  :cTitle             := "Ciudad"
                  :nLength            := 40
                  :Create()
               END WITH

               :Create()
            END WITH
            
            // Bevel contenedor de la tercera pestaña
            WITH OBJECT WBevel():New(:WO)
               :cId       := "bevel_tres"
               :nStyle    := xc_Row

               WITH OBJECT WEdit():New( :WO )
                  :cId                := "empresa"
                  :cHint              := "."
                  :cTitle             := "Empresa"
                  :nLength            := 40
                  :Create()
               END WITH

               WITH OBJECT WEdit():New( :WO )
                  :cId                := "puesto"
                  :cHint              := "."
                  :cTitle             := "Puesto"
                  :nLength            := 40
                  :Create()
               END WITH

               :Create()
            END WITH

            // esta parte queda fuera de los tabs
            WITH OBJECT WButton():New(:WO)
               :cText                    := "Nuevo Cliente"
               :cIcon                    := "addbox"
               :lLarge                   := .T.
               :nFix                     := "100%"
               :cOnClick                 := "#alert('Nuevo cliente')"
               :Create()
            END

            :Create()

         END WITH   // Form

         :Create()

      END WITH   // Listview principal

      oCgi:SendPage( :Create() )        // Se crea el HTML final y se envía al navegador saliendo del ejecutable CGI

   END WITH

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

// Comenzamos instanciando la Página Web que queremos crear

WITH OBJECT TWebPage():New()

:lValign := .f.

:lContainer := .f.

:lAlerts := .f.

WITH OBJECT WPanel():New(:WO)

:cTitle := "Clientes"

:aWidth[ _grande ] := 10

:aOffset[ _grande ] := 1

:oStyle:cPadding := 0

:oStyle:cBorder_radius := "10px"

WITH OBJECT WForm():New( :WO )

:cId := "forma_clientes"

:cFunction := "#alert('Saliendo')"

WITH OBJECT wTabs():New( :WO )

:cId := "tabs_captura"

:AddItem("primero" , "bevel_uno") //Nombre del tab y bevel a contener

:AddItem("segundo" , "bevel_dos")

:AddItem("tercero" , "bevel_tres")

:Create()

END WITH

// Bevel contenedor de la primera pestaña

WITH OBJECT WBevel():New(:WO)

:cId := "bevel_uno"

:nStyle := xc_Row

WITH OBJECT WEdit():New( :WO )

:cId := "cliente"

:cHint := "."

:cTitle := "cliente"

:nLength := 4

:Create()

END WITH

WITH OBJECT WEdit():New( :WO )

:cId := "nombre"

:cHint := "."

:cTitle := "Nombre"

:nLength := 50

:Create()

END WITH

:Create()

END WITH

// Bevel contenedor de la segunda pestaña

WITH OBJECT WBevel():New(:WO)

:cId := "bevel_dos"

:nStyle := xc_Row

WITH OBJECT WEdit():New( :WO )

:cId := "direccion"

:cHint := "."

:cTitle := "Direccion"

:nLength := 40

:Create()

END WITH

WITH OBJECT WEdit():New( :WO )

:cId := "ciudad"

:cHint := "."

:cTitle := "Ciudad"

:nLength := 40

:Create()

END WITH

:Create()

END WITH

// Bevel contenedor de la tercera pestaña

WITH OBJECT WBevel():New(:WO)

:cId := "bevel_tres"

:nStyle := xc_Row

WITH OBJECT WEdit():New( :WO )

:cId := "empresa"

:cHint := "."

:cTitle := "Empresa"

:nLength := 40

:Create()

END WITH

WITH OBJECT WEdit():New( :WO )

:cId := "puesto"

:cHint := "."

:cTitle := "Puesto"

:nLength := 40

:Create()

END WITH

:Create()

END WITH

// esta parte queda fuera de los tabs

WITH OBJECT WButton():New(:WO)

:cText := "Nuevo Cliente"

:cIcon := "addbox"

:lLarge := .T.

:nFix := "100%"

:cOnClick := "#alert('Nuevo cliente')"

:Create()

END

:Create()

END WITH // Form

:Create()

END WITH // Listview principal

oCgi:SendPage( :Create() ) // Se crea el HTML final y se envía al navegador saliendo del ejecutable CGI

END WITH

Contenido no disponible.
Por favor, acepta las cookies haciendo clic en este aviso

14-05-2021 a las 03:42 #1800

Gabriel Ornelas
Participante

Alfredo

Muchas Gracias!!

Solo un detalle no acepta Minusculas en el texto de los tabs, todo lo convierte a mayusculas..
14-05-2021 a las 07:37 #1801

Alfredo Sanz
Superadministrador

Es el comportamiento por defecto de materialize

Puedes usar la propiedad cCss de TWebpage para modificarlo

:cCSS := ".tabs .tab { text-transform: initial;}"

1

:cCSS := ".tabs .tab { text-transform: initial;}"

14-05-2021 a las 10:44 #1802

Xevi

Participante

Gabriel

Yo lo estoy utilizando, y lo que no he visto documentado, lo intento con cCss

         WITH OBJECT wTabs():New(:WO)
            :AddItem( "Paginat/Detall", "bevel_1" )
            :AddItem( "Llistat", "bevel_2" )
            WITH OBJECT :oStyle
               :cBackground_color := "transparent"
               :cHeight := "35px"
            END WITH
            :Create()
         END WITH

         :cCSS += ".tabs .tab a { font-weight: bold;color: white; }" //Texto pestaña no activa
         :cCSS += ".tabs .tab a:hover, .tabs .tab a.active { color: black !important;}" //Texto pestaña activa
         :cCSS += ".tabs .tab a:focus, .tabs .tab a:focus.active { background-color: #aaddd6; }" //Fondo pestaña activa
         :cCSS += ".tabs .indicator { background-color: black; }" //Barra indicadora pestaña activa
         :cCss += ".tabs .tab { text-transform: initial; }" //Para dejar el texto tal cual, sinó pone el texto de las etiquetas en mayúsculas

WITH OBJECT wTabs():New(:WO)

:AddItem( "Paginat/Detall", "bevel_1" )

:AddItem( "Llistat", "bevel_2" )

WITH OBJECT :oStyle

:cBackground_color := "transparent"

:cHeight := "35px"

END WITH

:Create()

END WITH

:cCSS += ".tabs .tab a { font-weight: bold;color: white; }" //Texto pestaña no activa

:cCSS += ".tabs .tab a:hover, .tabs .tab a.active { color: black !important;}" //Texto pestaña activa

:cCSS += ".tabs .tab a:focus, .tabs .tab a:focus.active { background-color: #aaddd6; }" //Fondo pestaña activa

:cCSS += ".tabs .indicator { background-color: black; }" //Barra indicadora pestaña activa

:cCss += ".tabs .tab { text-transform: initial; }" //Para dejar el texto tal cual, sinó pone el texto de las etiquetas en mayúsculas

14-05-2021 a las 14:24 #1803

Gabriel Ornelas
Participante

Alfredo,Xevi

Gracias! Ya tiene mejor pinta 😀

Autor

Entradas

Mostrando 5 respuestas a los debates

Debes estar registrado para responder a este debate.