Можно ли выровнять вертикальную линию индикатора выполнения в соответствии с разрешением?
Моя цель — идеально выровнять вертикальную линию посередине, даже если мы сжимаем страницу. Можно ли сделать расклад эффективным?
Я пробовал таким образом
<Card>
<CardContent>
<progress max = {1000} value = {500} />
<p className = "vertical_line"></p>
</CardContent>
</Card>
CSS:
.vertical_line {
border-left: 1px solid black;
height: 20px;
position: absolute;
top: 8px;
left: 17.5%;
}
Вот пример (https://codesandbox.io/s/restless-cache-uj2z0)
Но не мог точно получить, может ли кто-нибудь помочь мне в этом запросе?
@DennisVash - Не могли бы вы помочь мне с этим вопросом?
left: 104px или рассчитать его динамически, есть много похожих вопросов, которые вы можете найти
@DennisVash - Но когда я разворачиваю или сворачиваю страницу... вертикальная линия не выравнивается должным образом
Почему ты не использовал svg?
@ b3hr4d - для прогресса или вертикальной линии?
Для обоих, плохо сделать у вас пример!
@ b3hr4d - Примечание. Значение индикатора выполнения будет динамически меняться.
Это очень удобно и просто, также вы можете использовать анимацию.
Ответы 2
Я назначил относительное позиционирование родительскому контейнеру прогресса, чтобы выровнять строку с абсолютным позиционированием.
Примечание: я начал правило left: 49.5%. Поскольку ширина линии равна 1px. Это означает, что линия идеально отцентрована.
Попробуйте этот код:
Стиль.css
.vertical_line {
border-left: 1px solid black;
height: 20px;
position: absolute;
top: 0;
left: 49.5%;
}
.progress_container {
position: relative;
display: inline-block;
}
App.js
export default function App() {
return (
<div>
<Card>
<CardContent
className = {'progress_container'}
>
<progress max = {1000} value = {500} />
<p className = "vertical_line"></p>
</CardContent>
</Card>
</div>
);
}
@Арунья, рад помочь
Используя SVG, вы можете создать свой собственный настраиваемый компонент индикатора выполнения, а также использовать для него кадр анимации.
const Progress = ({max,value})=> {
const width = max + 5;
return (
<svg width = {width} height = "20">
<line
x1 = {5}
y1 = {10}
x2 = {max}
y2 = {10}
strokeWidth = {5}
strokeLinecap = "round"
stroke = "grey"
/>
<style>{"@keyframes draw{to{stroke-dashoffset:0}}"}</style>
<line
style = {{
strokeDasharray: width,
strokeDashoffset: width,
animation: "draw 1s linear forwards",
}}
x1 = {5}
y1 = {10}
x2 = {value}
y2 = {10}
strokeWidth = {5}
strokeLinecap = "round"
stroke = {"red"}
/>
<line x1 = {width/2} y1 = {0} x2 = {width/2} y2 = {20} strokeWidth = {2} stroke = "black" />
</svg>
)
}
const App = ()=> <Progress max = {200} value = {100} />
ReactDOM.render(
<App/>,
document.getElementById("react")
);<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id = "react"></div>
Да, не используйте относительную меру, такую как процент.