Position and Align Text inside a react-blessed <box> Element

栏目: IT技术 · 发布时间: 4年前

内容简介:The above video is hosted onThis is the7thpost in a series where we will be creating a developer dashboard in the terminal using... ~20 more lessons to come ...

The above video is hosted on egghead.io .

This is the7thpost in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib . For more information about the series and to take a sneak peak at what we're building, go to the 1st post in the series for more context.

  1. Bootstrap react-blessed Application
  2. Add ESLint Rules to react-blessed App
  3. Change text font with figlet
  4. Extract Component and Add useInterval hook
  5. Fetch and display current weather with weather-js
  6. Extract custom hook to simplify data fetching
  7. Change text color with chalk and gradient-string
  8. Position and Align Text inside a <box> Element

... ~20 more lessons to come ...

NOTE: You can find the code for this project in GitHub and you watch the whole Build a Terminal Dashboard with React video series on egghead.io .

Current Application

Here we have the beginnings of a React Terminal Dashboard. If we come to the terminal and kick off our app with npm start you'll see a sightly colored version displaying the date, current time and weather information.

Position and Align Text inside a react-blessed <box> Element

However, at this point everything is left aligned. So let's explore about positioning elements with-in the box.

Replace String Template Literal with <text> Elements

Currently we've been handling position with a multi-line string template literal, but that is pretty limiting.

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
      {`${chalk.blue(date)}

${gradient.atlas.multiline(time)}

${
  weather.status === 'loading'
    ? 'Loading...'
    : weather.error
    ? `Error: ${weather.error}`
    : formatWeather(weather.data)
}`}
    </box>
  );
}

So first, let's take each piece of information (date, time, and weather) and put them into <text> elements.

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text>
            {chalk.blue(date)}
        </text>
        <text>
            {gradient.atlas.multiline(time)}
        </text>
        <text>
            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

If we run our app now, we'll see that all the content is overlapped on top of each-other, which isn't what we want.

Position and Align Text inside a react-blessed <box> Element

Vertically Center Time and Bottom Align Weather

If we come back to our code, we can adjust where the text gets displayed by adding a top prop. For now, we'll leave the date variable as-is, but for the time we'll add a top prop of "center" . And for the weather we'll add a top prop of "100%" .

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text>
            {chalk.blue(date)}
        </text>
        <text top="center">            {gradient.atlas.multiline(time)}
        </text>
        <text top="100%">            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

Now, if we run our app again, we'll see that things look a "bit" better, but not quite what we wanted. The weather information is outside the boxed area.

Position and Align Text inside a react-blessed <box> Element

Fix Weather Alignment with Relative Adjustment

We technically don't want the top of our text to be the very bottom of the box. Thankfully the position props understand relative offsets, so we modify the position by adding a "-3" after the "100%".

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text>
            {chalk.blue(date)}
        </text>
        <text top="center">
            {gradient.atlas.multiline(time)}
        </text>
        <text top="100%-3">            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

Now, if we run our app our, the weather information will now be in-side the box. Yay!

Position and Align Text inside a react-blessed <box> Element

NOTE: Instead of using top="100%-3" we could have used bottom={0} to fix the issue. This is actually preferable since you don't have to worry about adjusting for the height of the text.

Horizontally Align Weather and Right Align Date

Now let's focus on getting our date to be right aligned in the box. To do that, we'll add a prop of right and set it to the number 0 . It's important you use a number here and not the string of "0" .

In addition, let's do a little alignment of the time as well. We'll horizontally center the time in the box by adding a left prop of "center" .

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text right={0}>            {chalk.blue(date)}
        </text>
        <text top="center" left="center">            {gradient.atlas.multiline(time)}
        </text>
        <text top="100%-3">
            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

Now, when we run our app you'll see that our date is indeed aligned to the right and our time is not only centered vertically, but also horizontally.

Position and Align Text inside a react-blessed <box> Element

Give Date and Weather a Little Breathing Room

The elements look nicer than before, but the date and weather are hugging the edge of the box a bit too close for my liking.

So, let's come back to our code and do a little adjustment. For the date we'll modify the right prop to be 1 instead of 0 . And for the weather we'll add a left prop of 1 (which will push it over just a little bit).

export default function Today() {
  /* ... */
  return (
    <text right={1}>        {chalk.blue(date)}
    </text>
    <text top="center" left="center">
        {gradient.atlas.multiline(time)}
    </text>
    <text top="100%-3" left={1}>        {weather.status === 'loading'
            ? 'Loading...'
            : weather.error
            ? `Error: ${weather.error}`
            : formatWeather(weather.data)}
    </text>
  );
}

And now when we run our app, our elements all look nicely aligned.

Position and Align Text inside a react-blessed <box> Element

Conclusion

This concludes the Today component. In following lessons we'll talk about laying out sections in our dashboard, creating other components (such as Time Log, Pomodoro, Recent Commits, etc...), and covering other interesting topics along the way.

Change text color with `chalk` and `gradient-string` inside `react-blessed`


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Uberland

Uberland

Alex Rosenblat / University of California Press / 2018-11-19 / GBP 21.00

Silicon Valley technology is transforming the way we work, and Uber is leading the charge. An American startup that promised to deliver entrepreneurship for the masses through its technology, Uber ins......一起来看看 《Uberland》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具