mphpmaster/laravel-scroll-to-top

Laravel页面滚动到顶部包。

维护者

详细信息

github.com/mPhpMaster/laravel-scroll-to-top

源代码

问题

安装: 12

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言:JavaScript

1.1.1 2023-12-19 23:33 UTC

Requires

MIT 48118498ad5764e1443b0cc63ffac107e6ebea5e

  • mPhpMaster <59211285+mPhpMaster.woop@users.noreply.github.com>

laravelscrollScroll page to top

This package is auto-updated.

Last update: 2024-09-20 01:07:34 UTC

README

依赖

  • php >=8.1 项目必需
  • laravel >=9 项目必需
  • illuminate/support >=9 Composer会自动安装
  • laravel/helpers ^1.5 Composer会自动安装

安装

composer require mphpmaster/laravel-scroll-to-top

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="scroll-to-top-config"

这是已发布配置文件的内容

return [
	// accepts string
	'tag'              => 'button',

	// accepts empty|array|string
	'attributes'       => [
		'type' => 'button',
	],

	// accepts empty|string
	'toggle_key'       => 'alt+t',

	// accepts empty
	"radius"           => "10px",

	// accepts empty
	"padding"          => "10px",

	// falsy value = 20
	"minHeight"        => 20,

	/*
	 * x value to scroll to when button clicked.
	 *
	 * accepts number
	 */
	"scrollToPosition" => 0,


	/*
	 * Scroll behavior when button clicked.
	 * possible values: 'auto' | 'instant' | 'smooth'
	 * accepts string
	 */
	"scrollBehavior"   => 'smooth',

	// accepts empty string (it will read html dir attribute)
	"direction"        => "",

	// accepts empty
	"startSpaceSize"   => "30px",

	// accepts empty
	"bottomSpaceSize"  => "20px",

	// accepts empty|array|string
	"classes"          => [
		'inline-flex',
		'items-center',
		'justify-center',
		'focus:ring',
		'focus:ring-primary-200',
		'focus:outline-none',
		'rounded',
		'scrollToTop--Button',
		'align-middle',
		'text-primary-500',
		'hover:text-primary-600',
		'focus:text-primary-400 active:text-primary-600',
	],

	// accepts empty|string
	"content"          => <<<HTML
<svg class="inline-block hover:opacity-50" fill="currentColor" height="20" role="presentation" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
	<path clip-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" fill-rule="evenodd"></path>
</svg>
HTML,

	// accepts empty|string
	"css"              => <<<CSS
.scrollToTop--Button {
  border: 1px solid;
  background-color: inherit;
}
.scrollToTop--Button:hover {
  //background-color: #ccc;
}
CSS,

];

您可以使用以下命令将js文件发布到public/js

php artisan vendor:publish --tag="scroll-to-top-js"

使用方法

Laravel Nova (4+)

无需添加任何内容。只需按您喜欢的样子编辑配置即可。

Laravel

您需要在您的前端代码中添加脚本标签

<script src="{{url('js/scrollToTop.js')}}"></script>

重要：不要忘记修改配置。

许可证

The Laravel框架是开源软件，采用MIT许可证。

此辅助工具是开源软件，采用MIT许可证。

支持巴勒斯坦 🇵🇸 #FreePalestine