GithubHelp home page GithubHelp logo

han-tun / gotop Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lgnbhl/gotop

0.0 1.0 0.0 1.18 MB

⬆ Add a "scroll back to top" icon to R Markdown and Shiny apps (https://felixluginbuhl.com/gotop)

License: Other

R 9.12% JavaScript 5.26% CSS 85.62%

gotop's Introduction

CRAN status Grand total pipeline status R build status

gotop

Add a “scroll to top” icon to R Markdown and Shiny

Add a “scroll back to top” Font Awesome icon to R Markdown documents and Shiny using GoTop.

Usage

Install the released version from CRAN.

install.packages("gotop")

To get a bug fix, or use a feature from the development version, you can install it from GitHub.

# install.packages("remotes")
remotes::install_github("lgnbhl/gotop")

R Markdown

To add a scroll up icon in a R Markdown document, simply add use_gotop() inside a R code chunk with {r, echo = FALSE} so the code will not be shown in the final document.

`�``{r, echo = FALSE}
gotop::use_gotop()
`�``

Shiny

To use it in Shiny, call use_gotop() inside the apps’ UI.

library(shiny)
library(gotop)

shinyApp(
  ui = fluidPage(
    align = "center",
    use_gotop(), # add it inside the ui
    h2("Shiny with gotop"), 
    HTML(rep("&darr;<br/><br/>scroll down<br/><br/>", 20)),
    textOutput("lookright")
  ),
  server = function(input, output, session){
    output$lookright <- renderText({ print("Look right") })
  }
)

Customize it

You can replace the default Font Awesome chevron up icon (“fas fa-chevron-up”) by any other Font Awesome icon, change its color, width and much more (run ?use_gotop() to see the documentation).

gotop::use_gotop(
  src = "fas fa-chevron-circle-up", # css class from Font Awesome
  color = "tomato", # color
  opacity = 0.8, # transparency
  width = 30, # size
  appear = 100 # number of pixels before appearance
  )

gotop's People

Contributors

lgnbhl avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.