This is a work in progress. ugh!
awcodes / alpine-floating-ui Goto Github PK
View Code? Open in Web Editor NEWAdd Floating UI functionality to Alpine 3.x components.
License: MIT License
alpine-floating-ui's Introduction
alpine-floating-ui's People
Contributors
Stargazers
Watchers
alpine-floating-ui's Issues
A bug with the appearance of a drop-down/panel
The drop-down list begins its movement somewhere outside the screen or bottom of the screen.
The bug appeared in the latest version of the commit. It's not in this one LINK
<script type="module">
import FloatingUI from 'js/floating-alpine.esm.js';
document.addEventListener("alpine:initializing", () => {
FloatingUI(window.Alpine);
});
</script>
@click="$refs.panel.toggle"
@click.away="$refs.panel.close()"
<div x-ref='panel' x-float.placement.bottom-start.flip.offset
class="absolute w-full z-20 rounded-lg shadow-grey-2xl bg-white overflow-hidden transition-all duration-500 max-h-72 overflow-y-auto">
content
</div>latest ver:
2024-03-14.13.58.28.mov
and older:
2024-03-14.14.03.17.mov
Can't get $float() example working
Hi,
I'm just trying to get the example with the $float() magic working. I would expect the "I'm floating" element to be hidden by default. While the visibility will be toggled with the button. Do I miss something?
Best, Arne
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@awcodes/[email protected]/dist/cdn.min.js" defer></script>
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div class="component" x-data>
<button @click="$float()">I have a floating panel. Woot!</button>
<div x-ref="panel" class="panel">I'm floating</div>
</div>
</body>
</html>Missing Floating UI Size Middleware
@awcodes - let me just start by saying that this library is excellent! It works just as expected and is very much appreciated.
I'm working on an implementation and am trying to match the size of the dropdown to the reference width using the size middleware (https://floating-ui.com/docs/size). It appears, however, that this library doesn't support the size middleware at all yet. Are there plans on your end for implementing it? If you have no plans to do so I may be able to take a shot at it in the next few weeks.
Unexpected token '?' on iOS Safari
We have the following JavaScript error on Safari browser:
SyntaxError: Unexpected token '?'
OS: iOS,
version: <= v13.3, basically any version that is below v13.4
for example take the below device as an example
Difference to Alpine's Anchor plugin
Hi folks,
what is the difference to the Alpine first-party anchor plugin? They say it's based on Floating UI, too? But this plugin seems to have much more features?!
Best, Arne
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.